javascript - 将原生开放模态 react 为模态

Question

• 如何从 React Native 中的模态框打开模态。 例如:我在模态中有一个表单，在表单中有一个颜色选择器字段，那么如何将颜色选择器打开到另一个模态。

名称:XYZ 年龄:21 颜色:A(这是颜色选择器。当我单击文本时，在模式中打开颜色选择器)

Answer 1

将外部模态内的嵌套颜色模态渲染为内容，嵌套模态的可见性将取决于文本上的单击/按下。考虑下面的示例代码，出于演示目的，我使用了 react-native-color-picker库，您也可以使用任何其他库。

示例

初始化状态变量，outerModalVisible控制外部模态的可见性，nestedModalVisible控制嵌套模态的可见性。在示例代码中，outerModalVisible 值保持为 true，但您可以根据您的要求更改它。

state={
  outerModalVisible: true,
  nestedModalVisible: false,
  selected_color: '#fff'
}

在render方法中，定义外部模型和嵌套模态

<View>
    <Modal visible={this.state.outerModalVisible} >
      <View style={styles.container}>
        <Text>Name: XYZ</Text>
        <Text>Age: 21</Text>
        <TouchableOpacity onPress={() =>{
          this.setState({
            nestedModalVisible: true
          });
        }}>
          <Text>Color picker: {this.state.selected_color}</Text>
        </TouchableOpacity>
        <Modal
          visible={this.state.nestedModalVisible}
        >
          <View style={styles.container}>
          <ColorPicker
            onColorSelected={color => {
              this.setState({
                selected_color: color,
                nestedModalVisible: false
              });
            }}
            style={{flex: 1}}
          />
            <Button title="click to close" onPress={() =>{
              this.setState({
                nestedModalVisible: false
              });
            }} />
          </View>
        </Modal>
      </View>
    </Modal>
  </View>

您可以在单独的组件中定义嵌套模型的内容，我只是保持简单并在单个组件中定义它。

希望这会有所帮助!