ListViewのネイティブモーダルに反応します

Question

私はListviewにモーダルを実装しようとしていますが、各リストコンポーネントはクリック可能であり、関連情報を持つモーダルを表示します。私は現在、この仕事を得ることができません。

でrenderRow機能：

var modalState = false; 
    open =() => { 
     modalState = true; 
    } 
    close =() => { 
     modalState = false; 
    } 
    return (
    <View> 
    <View style={{flexDirection: 'row', padding: 3}}> 
    <Card 
    > 
    <CardItem> 
    <TouchableHighlight 
    style={{padding: 15}} 
    underlayColor = 'transparent' 
    onPress = {() => { 
     modalState = true; 
     alert(modalState); 
    }} 
    > 
    <Text style = {{color:'grey'}}>{devices.name}</Text> 
    </TouchableHighlight> 
    <TouchableHighlight 
    style={{padding: 15}} 
    underlayColor = 'transparent' 
    onPress = {() => { 
     modalState = true; 
     alert(modalState); 
    }}> 
    <View> 
    <Text>     </Text> 
    </View> 
    </TouchableHighlight> 
    </CardItem> 
    </Card> 
    </View> 
    <Modal isVisible={modalState}> 
    <Card> 
    <CardItem> 
    <View style = {styles.modal}> 
     <Text>{devices.name}</Text> 
     <Button 
      title = "close" 
      onPress = {() => { 
      modalState = false; 
      }} 
      /> 
    </View> 
    </CardItem> 
    </Card> 
    </Modal> 
    </View> 
); 

Answer 1

を使用すると、クラスの状態にmodalState変数を移動する必要があります私のコードは次のとおりです。 あなたのコードでは、modalStateは正しく変更されていますが、コンポーネントが再レンダリングされないため、モーダルは新しい小道具を受け取っていません。this.setStateはこれを解決する必要があります。

class listWithModal extends React.Compoent { 

    constructor(props) { 
     super(props) 
     this.state = { 
      modalState = false 
     } 
    } 
    render() { 
     const {modalState} = this.state 
     const open =() => { 
      this.setState({ modalState: true }) 
     } 
     const close =() => { 
      this.setState({ modalState: true }) 
     } 
     return (
      <View> 
       <View style={{ flexDirection: 'row', padding: 3 }}> 
        <Card 
        > 
         <CardItem> 
          <TouchableHighlight 
           style={{ padding: 15 }} 
           underlayColor='transparent' 
           onPress={() => open()} 
          > 
           <Text style={{ color: 'grey' }}>{devices.name}</Text> 
          </TouchableHighlight> 
          <TouchableHighlight 
           style={{ padding: 15 }} 
           underlayColor='transparent' 
           onPress={() =>open()}> 
           <View> 
            <Text>     </Text> 
           </View> 
          </TouchableHighlight> 
         </CardItem> 
        </Card> 
       </View> 
       <Modal isVisible={modalState}> 
        <Card> 
         <CardItem> 
          <View style={styles.modal}> 
           <Text>{devices.name}</Text> 
           <Button 
            title="close" 
            onPress={() => close()} 
           /> 
          </View> 
         </CardItem> 
        </Card> 
       </Modal> 
      </View> 
     ); 
    } 
}