如何在 react native 中打开新页面以显示其他详细信息或单个页面

Question

>我有一个看起来像这样的平面列表

  <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}
   />

此平面列表循环浏览结果，现在显示项的名称。现在，我拥有的按钮应该打开一个新窗口或页面以显示更多详细信息。如何在本机响应中执行此操作？我一直在研究导航，堆栈导航是最好的方法吗？还是有其他选择？

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}
/>

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

但是，我觉得最好的方法是显示全屏模式，如果从详细信息页面视图中没有更多的路由要做。

Answer 2

您可以在 render(( 方法的同一页面中使用由状态控制的模态，将代码放在下面：

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

modalVisible var 可以取真/假，如果显示真 de 模态，模态是 react-native-modal 的一部分。