react-native – 使用Navigator透明地反映Native Modal,而不使用

就导航器而言,您可以使用导航器的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,});