React NativeのModalコンポーネントをトリガーする場所は？

Question

私は自分のアプリにアイテムのリストを持っています。ユーザーがリスト項目をクリックすると、詳細を表示したい。 details-componentをリストアイテムコンポーネントに配置し、デフォルトでそれを隠すことができました。

良い方法がありますか？

Answer 1

Modalは一度に1つしか表示されないものとします。 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> 
 
    ); 
 
    } 
 

 
}