Question

React Native文档说RN应该使用Navigator来创建模态（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，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,
  },
});

Answer 2

要回答更新的问题，您需要做的就是将configureScene更改为以下内容：

configureScene(route, routeStack){
  if(route.type == 'Modal') {
    return Navigator.SceneConfigs.FloatFromBottom
  }
  return Navigator.SceneConfigs.PushFromRight 
}

然后，通过＆＃39; Modal＆＃39;当想要一个模态时：

_navigate(name, type='Normal') {
  this.props.navigator.push({
    component: Home,
    passProps: {
      name: name
    },
    type: type
  })
}

设置了一个示例here。

https://rnplay.org/apps/ALL-Sw

Answer 3

虽然这不适用于您的情况，因为我使用的是Modal，但我只是想告诉我如何实现透明背景：

在您正在呈现render的{{1}}方法中，传递Modal prop
向您的transparent={true}添加一个View子项（将所有其他内容放入此modal）并使用View将style应用于backgroundColor = 'rgba(r, g, b, a)'。此处a指的是您在后台想要的 alpha或不透明度

React-Native v0.46.4

参见链接：

react-native-router-flux issue #749

react-native issue #2386

使用Navigator透明地反映Native Modal而不使用Modal

3 个答案: