モーダルを作成してその場でレンダリングするにはどうすればよいですか？

Question

私は最初のアプリをReact Nativeにビルドしています。私はリストビューをいくつも表示し、それぞれがクリック可能です。私の質問は、モーダルを上に表示したい行をクリックすることです。 IOSではクリックとサブビューの追加と同様です。

renderRow(rowData){ 
    return (
     <TouchableHighlight onPress={() => this.pressRow()}> 
     <View style={styles.parcelInfoContainer}> 

     </View> 
     </TouchableHighlight> 
    ); 
    } 

ここで、問題は、新しいコンポーネントのレンダリングに関してpressRowによって呼び出される関数で何をすべきかについてわかりません。 IOSでは、この時点でビューを追加するだけですが、React Nativeでどのように動くかについてはわかりません。私はコンポーネントのアイデアを理解しているだけで、新しいコンポーネントを即座にレンダリングする方法ではありません。

Answer 1

同じModalをレンダリングする場合は、レイアウトに関して、render（）関数で定義する必要があります。オンザフライでレンダリングすることはできませんが、モーダルで状態を変更して好きなものを表示することができます。あなたは行ごとに異なるレイアウトをしたい場合は

onPressRow = (dataFromRow) => { 
    this.setState({ 
    modalText: dataFromRow.text 
    }) 
    this.showModal(); //Call your function to show modal 
} 

render() { 
    return (
    <View> 
     <FlatList /> 
     <Modal> 
     <View> 
      ... 
      <Text>{this.state.modalText}</Text> 
     </View> 
     </Modal> 
    </View> 
) 
} 

しかし、あなたがレンダリングされるべきレイアウトを決定するための関数のようなthis.getModalContent()を記述する必要があります。この関数はrender =><Modal> {this.getModalContent()} </Modal>

getModalContent =() => { 
    switch (this.state.modalText) { // define a better logic here. 
    case 'a': 
     return (<Text> hey </Text>) 
    ... 
    } 
} 

で呼び出す必要があります。