React Native 文档说 RN 应用程序应该使用 Navigator 来创建 Modals (https://facebook.github.io/react-native/docs/modal.html#content)。
如何在不使用 Modal 的情况下使用 Navigator 创建透明模式？我希望用户在后台看到当前页面。谢谢。
【问题讨论】：
标签： react-native
要回答有关透明模式的问题，您可以使用 rgba 背景颜色，例如 rgba(0, 0, 0, 0.5)，并将 alpha 传递给颜色的最后一个参数：rgba(r, g, b, alpha)。
就导航器而言，您可以使用导航器的 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, 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',
justifyContent: 'center',
overflow: 'hidden',
},
buttonText: {
fontSize: 18,
margin: 5,
textAlign: 'center',
},
modalButton: {
marginTop: 10,
},
});
【讨论】：
要回答更新后的问题，您只需将您的 configureScene 更改为以下内容：
configureScene(route, routeStack){
if(route.type == 'Modal') {
return Navigator.SceneConfigs.FloatFromBottom
}
return Navigator.SceneConfigs.PushFromRight
}
然后，在需要模态时传递“模态”的类型：
_navigate(name, type='Normal') {
this.props.navigator.push({
component: Home,
passProps: {
name: name
},
type: type
})
}
有一个例子设置here。
【讨论】：
虽然这不适用于您的情况，因为我使用了 Modal，但我想告诉您我是如何实现 透明背景的：
Modal 的render 方法中，传递一个prop transparent={true}
View 子级添加到您的modal（将所有其他内容放入此View）并使用backgroundColor = 'rgba(r, g, b, a)' 对其应用style。这里a 指的是您希望在后台使用的 alpha 或不透明度级别
React-Native v0.46.4
查看链接：
【讨论】：