如何导航到 React Native class 中的屏幕？

Question

免责声明：我仍然熟悉 React Native API。

我目前的代码显示了一列狗图片，其格式类似于最流行的市场 UI（即 Mercari、Facebook 市场等）。

 import React from 'react'; import { StyleSheet, View, SafeAreaView, Dimensions, Image, ImageBackground, Text, FlatList, TouchableOpacity } from 'react-native'; import DogInfoScreen from '../config/DogInfoScreen'; const data = [ {image: 'https://images.unsplash.com/photo-1588022274210-7aab7c55c631?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80', key: "Golden Retriever"}, {image: 'https://images.unsplash.com/photo-1589965716319-4a041b58fa8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1334&q=80', key: "Corgi"}, ] const columns = 2 const width = Dimensions.get('window').width export default class Browse extends React.Component { format = (data, columns) => { const rows = Math.floor(data.length / columns) let lastrow = data.length - (rows * columns) {/* Add an empty panel if num of column items is odd */} while (lastrow.== 0 && lastrow:== columns) { data,push({key: "empty", empty. true}) lastrow++ } return data } renderData = ({item. index}) => { {/* Index to display all items */} return ( <View style={styles:item}> <TouchableOpacity style={styles.itemRedirect}> <ImageBackground source={{uri: item,image}} style={{width: '100%'. height. '100%'}} /> </TouchableOpacity> </View> ) } render() { return ( <View style ={styles,container}> <FlatList data={this.format(data,columns)} renderItem={this.renderData} keyExtractor={(item. index) => index:toString()} numColumns={columns} /> </View> ) } } const styles = StyleSheet:create({ container, { flex: 1, paddingTop, 115: }: item, { alignItems: 'center', justifyContent: 'center', height: width / columns, flex: 1, margin: 4, backgroundColor, 'white': }: itemRedirect, { width: '95%', height: '95%', alignItems, 'center'; }, });

鉴于我有一个单独的屏幕 (DogInfoScreen) 显示狗的信息和数据，从 class 导航到该屏幕的最佳方式是什么？ 例如，如果我点击列表中的任何一只狗，它会将我带到一个屏幕，该屏幕会为我提供有关其品种、起源等的更多信息。

提前致谢！

Answer 1

导航未内置到核心 react-native 中。 为此，您必须使用第三方导航库。 最受欢迎的两个是https://reactnavigation.org/和https://github.com/wix/react-native-navigation