react-native - 在不使用 Modal 的情况下使用 Navigator 以透明方式响应 Native Modal

Question

React Native 文档说 RN 应用程序应该使用 Navigator 来创建 Modals ( https://facebook.github.io/react-native/docs/modal.html#content )。

如何在不使用 Modal 的情况下使用 Navigator 创建透明模态？我希望用户在后台查看当前页面。谢谢你。

Answer 1

要回答有关透明模式的问题，您可以使用 rgba 背景颜色，例如 rgba(0, 0, 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, 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,
  },
});