Question

我有一个看起来像这样的FlatList

  <FlatList
     horizontal={true}
     data={this.state.mydata}
     renderItem={({ item }) => (
      <View>
        <Text>{item.name}</Text>
        <Button onPress={()=>"HOW TO SEE Details? } title="See Details"/>
      </View>
       )}
       keyExtractor={item => item.id}
   />

此FlatList遍历结果，现在显示项目的名称。现在我的按钮应该打开一个新窗口或一个页面来显示其他详细信息。我怎么做反应本机？我一直在寻找导航，并且堆叠导航是最好的方法吗？还是有其他选择吗？

Answer 1

是的，堆栈导航器应该这样做。

<FlatList
 horizontal={true}
 data={this.state.mydata}
 renderItem={({ item }) => (
  <View>
    <Text>{item.name}</Text>
    <Button onPress={()=> this.props.navigation.navigate('details_page', {details: item.details})} title="See Details"/>
  </View>
   )}
   keyExtractor={item => item.id}
/>

只需在堆栈导航器中有一个详细信息屏幕。

但是我觉得最好的方法是在详细信息页面视图中显示要进行的路由时显示全屏The action or event has been blocked by Disabled Mode。

Answer 2

你可以在render（）方法的同一页面中使用由状态控制的模态放下面的代码：

<Modal isVisible={this.state.modalVisible}>
   // Your modal content .....
</Modal>

modalVisible var可以为true / false，如果显示true de Modal，则Modal是react-native-modal的一部分。

如何打开新页面以显示其他详细信息或单页反应原生？

2 个答案: