Javascript 如何在 React Native 中从底部滑入和滑出 <View/>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39117599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to slide <View/> in and out from the bottom in React Native?
提问by Jo Ko
In React Native iOS, I would like to slide in and out of a like in the following picture.
在 React Native iOS 中，我想在下图中滑入和滑出一个像。
In the following example, when a button is pressed, the Payment Informationview pops up from the bottom, and when the collapse button is pressed, it goes back down and disappears.
在下面的例子中，当按下一个按钮时，Payment Information视图从底部弹出，当按下折叠按钮时，它返回并消失。
What would be the correct and proper way to go about doing so?
这样做的正确方法是什么？
Thank you in advance!
先感谢您！
EDIT
编辑
回答by Ahmad Al Haddad
Basically, you need to absolute-position your view to the bottom of the screen. Then you translate its y value to equal its height. (The sub view must have a specific height in order to know how much to move it)
基本上，您需要将视图绝对定位到屏幕底部。然后将其 y 值转换为等于其高度。（子视图必须具有特定的高度才能知道移动多少）
Here's a playground showing the result: https://rnplay.org/apps/n9Gxfg
这是一个显示结果的操场：https: //rnplay.org/apps/n9Gxfg
Code:
代码：
'use strict';
import React, {Component} from 'react';
import ReactNative from 'react-native';
const {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Animated
} = ReactNative;
var isHidden = true;
class AppContainer extends Component {
constructor(props) {
super(props);
this.state = {
bounceValue: new Animated.Value(100), //This is the initial position of the subview
buttonText: "Show Subview"
};
}
_toggleSubview() {
this.setState({
buttonText: !isHidden ? "Show Subview" : "Hide Subview"
});
var toValue = 100;
if(isHidden) {
toValue = 0;
}
//This will animate the transalteY of the subview between 0 & 100 depending on its current state
//100 comes from the style below, which is the height of the subview.
Animated.spring(
this.state.bounceValue,
{
toValue: toValue,
velocity: 3,
tension: 2,
friction: 8,
}
).start();
isHidden = !isHidden;
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight style={styles.button} onPress={()=> {this._toggleSubview()}}>
<Text style={styles.buttonText}>{this.state.buttonText}</Text>
</TouchableHighlight>
<Animated.View
style={[styles.subView,
{transform: [{translateY: this.state.bounceValue}]}]}
>
<Text>This is a sub view</Text>
</Animated.View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 66
},
button: {
padding: 8,
},
buttonText: {
fontSize: 17,
color: "#007AFF"
},
subView: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
backgroundColor: "#FFFFFF",
height: 100,
}
});
AppRegistry.registerComponent('AppContainer', () => AppContainer);
回答by edvilme
I know it is a little bit late, but thought it might be useful for someone. You should try out a component called rn-sliding-out-panel. It works awesomely. https://github.com/octopitus/rn-sliding-up-panel
我知道这有点晚了，但认为它可能对某人有用。您应该尝试一个名为rn-sliding-out-panel. 它工作得非常好。https://github.com/octopitus/rn-sliding-up-panel
<SlidingUpPanel
draggableRange={top: 1000, bottom: 0}
showBackdrop={true|false /*For making it modal-like*/}
ref={c => this._panel = c}
visible={ture|false /*If you want it to be visible on load*/}
></SlidingUpPanel>
And you can even open it from an external button:
您甚至可以从外部按钮打开它：
<Button onPress={()=>{this._panel.transitionTo(1000)}} title='Expand'></Button>
You can install it via npm: sudo npm install rn-sliding-out-panel --saveon your react-native root directory.
您可以通过 npm:sudo npm install rn-sliding-out-panel --save在您的 react-native 根目录中安装它。
I hope it helps someone :D
我希望它可以帮助某人：D
