React Native：如何导航到页面？

问题描述

下面的代码是 Menu.js 。我想通过点击 Settings 导航到 Settings.js 。 我在下面提到了Menu.js的代码。 我可以在点击某些内容时使用 onPress 导航到下一页吗？

我不明白如何将以下代码中的此功能添加到项目中。

import 'react-native-gesture-handler';
import React,{ useState } from 'react';
import { Text,TextInput,View,StyleSheet,TouchableOpacity,Image,Button,imagebackground,FlatList,StatusBar,SafeAreaView} from 'react-native';



const DATA = [
  {
    id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",title: "Tasks Done",},{
    id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",title: "Goals",{
    id: "58694a0f-3da1-471f-bd96-145571e29d72",title: "Rank",{
         id: "58694a0f-3da1-471f-bd96-145571e29d74",title: "Week Plan",{
         id: "58694a0f-3da1-471f-bd96-145571e29d73",title: "Settings",];

const Item = ({ item,onPress,style }) => (
  <TouchableOpacity onPress={onPress} style={[styles.item,style]}>
    <Text style={styles.title}>{item.title}</Text>
  </TouchableOpacity>
);

const Menu = () => {
  const [selectedId,setSelectedId] = useState(null);

  const renderItem = ({ item }) => {
    const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";

    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.id)}
        style={{ backgroundColor }}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        exTradata={selectedId}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,marginTop: StatusBar.currentHeight || 0,item: {
    padding: 20,marginVertical: 8,marginHorizontal: 16,title: {
    fontSize: 25,});

export default Menu;

我想在单击 settings 后立即导航到 Settings.js。 但我不想失去现有的变色功能。

我该怎么做？？

解决方法

首先，这里的官方文档值得一看：https://reactnative.dev/docs/navigation

官方文档推荐react navigation，看看react navigation：https://reactnavigation.org/

将此导航集成到您的项目中，一旦有了它，您就可以使用 navigation.navigate(nameOfYourView)。