Javascript 如何滑动<；查看/>；从底部进进出出？

在React Native iOS中，我想滑入和滑出下图中的类似

在下面的示例中，当按下按钮时，从底部弹出

支付信息

视图，当按下折叠按钮时，它返回并消失

这样做的正确方法是什么

提前谢谢你

编辑

---

基本上，您需要将视图绝对定位到屏幕底部。然后将其y值转换为等于其高度。（子视图必须具有特定高度，才能知道要移动多少）

下面是一个游乐场，展示了结果：

代码：

“严格使用”；
从“React”导入React，{Component}；
从“react native”导入ReactNative；
常数{
评估学，
样式表，
文本，
看法
触控高光，
有生气的
}=反应性；
var isHidden=真；
类AppContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
bounceValue:new Animated.Value（100），//这是子视图的初始位置
buttonText:“显示子视图”
};
}
_toggleSubview（）{
这是我的国家({
buttonText:！isHidden？“显示子视图”：“隐藏子视图”
});
var-toValue=100；
如果（isHidden）{
toValue=0；
}
//这将根据子视图的当前状态，在0和100之间设置子视图的传输动画
//100来自下面的样式，即子视图的高度。
春天(
this.state.bounceValue，
{
toValue:toValue，
速度：3，
紧张局势：2，
摩擦：8，
}
).start（）；
isHidden=！isHidden；
}
render（）{
返回(
{this.\u toggleSubview（）}}>
{this.state.buttonText}
这是一个子视图
);
}
}
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
玛金托普：66
},
按钮：{
填充：8，
},
按钮文字：{
尺寸：17，
颜色：“007AFF”
},
子视图：{
位置：“绝对”，
底部：0，
左:0,，
右:0,，
背景颜色：“FFFFFF”，
身高：100，
}
});
AppRegistry.registerComponent（'AppContainer'，（）=>AppContainer）；

我知道现在有点晚了，但我认为这可能对某些人有用。您应该试用一个名为

rn滑出面板

的组件。它工作得很好

this.\u panel=c}
visible={ture | false/*如果希望它在加载时可见*/}
>

您甚至可以通过外部按钮打开它：

<Button onPress={()=>{this._panel.transitionTo(1000)}} title='Expand'></Button>

{this.\u panel.transitiono（1000）}title='Expand'>

您可以通过npm:

sudo npm install rn滑出面板安装它--将

保存到您的react原生根目录中

---

---

我希望它能帮助一些人：D

经过长时间的搜索，我找到了一个非常好的图书馆，名为，拥有麻省理工学院许可证。 它将帮助您轻松制作滑块

我希望这个图书馆能帮助你

import SwipeUpDown from 'react-native-swipe-up-down';

<SwipeUpDown        
    itemMini={<ItemMini />} // Pass props component when collapsed
    itemFull={<ItemFull />} // Pass props component when show full
    onShowMini={() => console.log('mini')}
    onShowFull={() => console.log('full')}
    onMoveDown={() => console.log('down')}
    onMoveUp={() => console.log('up')}
    disablePressToShow={false} // Press item mini to show full
    style={{ backgroundColor: 'green' }} // style for swipe
/>

从“react native swipe up-down”导入SwipeUpDown；
console.log（'mini'）}
onShowFull={（）=>console.log（'full'）}
onMoveDown={（）=>console.log（'down'）}
onMoveUp={（）=>console.log（'up'）}
disablePressToShow={false}//按item mini以显示完整
style={{backgroundColor:'green'}}//用于滑动的样式
/>

您在付款视图中使用的是flex还是absolute Position？谢谢！我会尝试一下，非常感谢！不过，还有一个问题，当它出现时，它将显示一个按钮，一旦单击，我希望出现相同的子视图。我怎样才能这样做呢？谢谢大家!@JoKo只需添加一个新按钮，并将onpress映射到一个新功能即可。尝试后，新/第二个子视图从底部向上滑动，但上升太多（使用屏幕截图更新原始帖子。粉色是第二个子视图，黑色是第一个子视图，如底部所示）。事实证明，这与

容器样式

没有

alignItems:'center

有关。当它从底部向上滑动时，是否可以将其粘贴到底部（如第一个子视图），而不对齐项目：“居中”？因为，第二个

子视图中的内容都与中心对齐，我不想这样。只是想看看你是否看到我之前的评论。请让我们知道。
<Button onPress={()=>{this._panel.transitionTo(1000)}} title='Expand'></Button>

import SwipeUpDown from 'react-native-swipe-up-down';

<SwipeUpDown        
    itemMini={<ItemMini />} // Pass props component when collapsed
    itemFull={<ItemFull />} // Pass props component when show full
    onShowMini={() => console.log('mini')}
    onShowFull={() => console.log('full')}
    onMoveDown={() => console.log('down')}
    onMoveUp={() => console.log('up')}
    disablePressToShow={false} // Press item mini to show full
    style={{ backgroundColor: 'green' }} // style for swipe
/>