將本機開放模式轉換為模式

Question

• 如何從React Native的模式框中打開模式。 例如：我在模態中有一個表單，並且在表單中有一個顏色選擇器字段，因此如何將顏色選擇器打開到另一個模態。

Name: XYZ Age: 21 Color: A (This is the color picker. When I click the text open color picker in modal)

Answer 1

將嵌套的顏色模態呈現為外部模態內部的內容，嵌套模態的可見性將取決於對text的click/press 。 考慮下面的示例代碼，出於演示目的，我使用了react-native-color-picker庫，也可以使用任何其他庫。

樣品

初始化狀態變量時， outerModalVisible控制外部模態的可見性， nestedModalVisible控制嵌套模態的可見性。 在示例代碼中， outerModalVisible值保持為true但您可以根據需要進行更改。

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

在渲染方法中，定義外部模型和嵌套模態

<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>

您可以在一個單獨的組件中定義嵌套模型的內容，我只是保持簡單並在單個組件內定義它。

希望這會有所幫助！