React Native - 在列表中创建部分，可点击 link 到屏幕

Question

我正在尝试像 React Native 中那样创建一个 Settings Page:

在 react native 中使用 SectionList，但我不确定如何将 navigation 传递到 link 到另一个 view。

例如

当我单击 Edit Profile 时，这应该会将我带到另一个页面。
当我点击 Privacy policy 时，应该会打开带有 link 的网页。

更新代码

settingsNavigator.js

import React from 'react';
import { createStackNavigator } from "@react-navigation/stack";

import SettingsScreen from "../screens/settingsScreen";
import EditProfileScreen from "../screens/editProfileScreen"

const SettingsStack = createStackNavigator();

const SettingsNavigator = () => (
    <SettingsStack.Navigator>
        <SettingsStack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }} />
        <SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
    </SettingsStack.Navigator>
)

export default SettingsNavigator

settingScreen.js

import React from 'react';
import { Text, StyleSheet, TouchableOpacity, Linking } from 'react-native';
import { Card } from 'react-native-paper'

import Screen from '../Components/Screen'

function SettingsScreen({navigation}) {
    return (
        <Screen style={styles.screen}>
            <TouchableOpacity onPress={() => navigation.navigate("EditProfileScreen")}>
                <Card style={styles.list} >
                    <Text>Edit Profile</Text>
                </Card>
            </TouchableOpacity>
        </Screen>
    )
}

const styles = StyleSheet.create({
    list: {
        padding: 20,
        backgroundColor: 'white',
        borderRadius: 5,
        marginTop: 10,
      },
})

export default SettingsScreen

editProfileScreen

import React from 'react';
import { Text, StyleSheet} from 'react-native';

import Screen from '../Components/Screen'

function EditProfileScreen({navigation}) {
    return (
        <Screen style={styles.screen}>
            <Text>Edit Profile Screen</Text>
        </Screen>
    )
}

const styles = StyleSheet.create({
    
})

export default EditProfileScreen

我收到错误：

The action 'NAVIGATE' with payload {"name":"EditProfileScreen"} was not handled by any navigator.

Do you have a screen named 'EditProfileScreen'?

Answer 1

这取决于您使用的导航模块。我推荐React Navigation。使用 React Navigation，您可以通过 props.Provided 屏幕存在于堆栈中或者您之前已经导航过来访问每个屏幕上的导航对象。

您可以通过 onPress 事件处理程序进行导航，例如：

onPress={() => navigation.navigate('EditProfile')}

不要忘记事先阅读道具中的导航

function SettingsPage({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
     // UI THINGS
    </View>
  );
}

Answer 2

我想你想研究路由器。我使用组件 <NavLink> 和 <Link> 来做这样的事情。

https://www.newline.co/@andreeamaco/how-to-handle-navigation-in-your-app-with-react-router-link--088f82d3

这是一个很棒的视频：先决条件（可能是可选的）： https://www.youtube.com/watch?v=eofpZPRUnP8 这是实际的实现： https://www.youtube.com/watch?v=5pt_igBTCsI&t=8s

Answer 3

使用 React Navigation 从一个屏幕导航到另一个屏幕，react-native 的 Linking 组件在浏览器中打开 URL。

工作应用程序：Expo Snack

应用输出：

示例应用程序：

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Linking,
} from 'react-native';
import Constants from 'expo-constants';

import { Card } from 'react-native-paper';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

const url =
  '

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name={'Home'} component={Home} />

        <Stack.Screen name={'EditProfile'} component={EditProfile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const Home = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => navigation.navigate('EditProfile')}>
        <Card style={styles.list}>
          <Text>EditProfile</Text>
        </Card>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => Linking.openURL(url)}>
        <Card style={styles.list}>
          <Text>Privacy Policy</Text>
        </Card>
      </TouchableOpacity>
    </View>
  );
};
const EditProfile = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>EditProfile Screen</Text>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  list: {
    padding: 20,
    backgroundColor: 'white',
    borderRadius: 5,
    marginTop: 10,
  },
});

React Native - 在列表中创建部分，可点击 link 到屏幕

React Native - Creating sections in a list with clickable link to screen

react-native

react-native-sectionlist