React Native：如何导航到页面？答案

【问题标题】：React Native: How to navigate to a page?React Native：如何导航到页面？
【发布时间】：2021-04-27 09:15:12
【问题描述】：

下面的代码是 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。但我不想失去现有的变色功能。

我该怎么做？？

【问题讨论】：

标签： javascript android react-native frontend mobile-application

【解决方案1】：

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

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

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

【讨论】：