在React Native中触发Modal组件的位置？

Question

我的应用中有一个项目列表。当用户点击列表项时，我想在a中显示更多详细信息。我可以将details-component放入列表项组件中并默认隐藏它。

有更好的方法吗？

Answer 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>
    );
  }

}