哪裏可以觸發React Native中的模態組件？

Question

我有我的應用程序中的項目列表。當用戶點擊列表項時，我想在a中顯示更多細節。我可以將詳細信息組件放入列表項組件中，並在默認情況下隱藏它。

有沒有更好的方法？

Answer 1

假設您一次只能顯示一個Modal。您可以在列表外部創建Modal組件並將其設置爲在列表項目單擊時可見。所以你的代碼會是這樣的。

class YourComponent extends Component { 
 

 
    state = { 
 
    showModal: false, 
 
    }; 
 

 
    render() { 
 
    const items = [1, 2, 3]; 
 
    return (
 
    <View> 
 
     <View> 
 
     { 
 
      items.map((item, i) => { 
 
      <Button key={i} onPress={() => this.setState({ showModal: true, item }) title="Open Modal" /> 
 
      }) 
 
      } 
 
     </View> 
 
     <ReactNative.Modal visible={this.state.showModal}> 
 
     <Text>{ this.state.item }</Text> 
 
     </ReactNative.Modal> 
 
    </View> 
 
    ); 
 
    } 
 

 
}