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

Question

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

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

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) 来显示狗的信息和数据，从本课程导航到该屏幕的最佳方式是什么？例如，如果我点击列表中的任何一只狗，它会带我进入一个屏幕，提供有关其品种、起源等的更多信息。

提前致谢！

Answer 1

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