React Native文档说RN应该使用Navigator创建Modals(
https://facebook.github.io/react-native/docs/modal.html#content).
如何在不使用Modal的情况下使用Navigator创建透明模式?我希望用户在后台查看当前页面.谢谢.
要回答关于透明模态的问题,可以使用rgba背景颜色,例如rgba(0,0.5),并将alpha传递给颜色的最后一个参数:rgba(r,g,b),α).
就导航器而言,您可以使用导航器的Navigator.SceneConfigs.FloatFromBottom参数创建模态,将模态导航器放在另一个导航器的场景中.有一个很好的线程与here的例子.像:
this.props.navigator.push({ title: 'title',sceneConfig: Navigator.SceneConfigs.FloatFromBottom,component: component,navigationBar: <NavigationBar title="Initial View"/>,passProps: {} })
我创建了一个透明背景here的示例项目,并将代码放在下面.我希望这有帮助!
https://rnplay.org/apps/pHqjhQ
'use strict'; var React = require('react-native'); var { Modal,StyleSheet,SwitchIOS,Text,TouchableHighlight,View,AppRegistry,} = React; exports.displayName = (undefined: ?string); exports.framework = 'React'; exports.title = '<Modal>'; exports.description = 'Component for presenting modal views.'; var Button = React.createClass({ getInitialState() { return { active: false,}; },_onHighlight() { this.setState({active: true}); },_onUnhighlight() { this.setState({active: false}); },render() { var colorStyle = { color: this.state.active ? '#fff' : '#000',}; return ( <TouchableHighlight onHideUnderlay={this._onUnhighlight} onPress={this.props.onPress} onShowUnderlay={this._onHighlight} style={[styles.button,this.props.style]} underlayColor="#a9d9d4"> <Text style={[styles.buttonText,colorStyle]}>{this.props.children}</Text> </TouchableHighlight> ); } }); var ModalExample = React.createClass({ getInitialState() { return { animated: true,modalVisible: false,transparent: true,_setModalVisible(visible) { this.setState({modalVisible: visible}); },render() { var modalBackgroundStyle = { backgroundColor: this.state.transparent ? 'rgba(0,0.5)' : '#f5fcff',}; return ( <View> <Modal animated={this.state.animated} transparent={this.state.transparent} visible={this.state.modalVisible}> <View style={[styles.container,modalBackgroundStyle]}> <View style={[styles.innerContainer]}> <Button onPress={this._setModalVisible.bind(this,false)} style={styles.modalButton}> Close </Button> </View> </View> </Modal> <View style={{ marginTop:60 }}> <Button onPress={this._setModalVisible.bind(this,true)}> SHOW MODAL </Button> </View> </View> ); },}); AppRegistry.registerComponent('ModalExample',() => ModalExample); var styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',padding: 20,},innerContainer: { borderRadius: 10,alignItems: 'center',button: { borderRadius: 5,flex: 1,height: 44,alignSelf: 'stretch',overflow: 'hidden',buttonText: { fontSize: 18,margin: 5,textAlign: 'center',modalButton: { marginTop: 10,});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。