在 React Native Navigation 中，如何将道具发送到我的屏幕？

Question

我希望能够在除第一个屏幕之外的其他屏幕上使用导航，但我收到 this.props 不存在的错误。

我的 App.js 文件设置如下：

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

import Screen2 from './screens/Screen2';  
import Screen3 from './screens/Screen3';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View>
        <Button
        title="Go to Screen2"
        onPress={() => {
        navigation.navigate('Screen2');
        }}
      />
      <Button
        title="Go to Screen3"
        onPress={() => {
        navigation.navigate('Screen3');
        }}
      />
    </View>
  );


const App: () => React$Node = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Screen2" component={Screen2} />
        <Stack.Screen name="Screen3" component={Screen3} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

app.js 中的按钮有效，但如果我转到 Screen2 并单击一个打算转到另一个按钮（下例中的 Screen3），则道具不存在。

示例 Screen2.js 如下所示：

const Screen2: () => React$Node = () => {

  return (
    <>   
      <View style={{ flex: 1 }}>
        <Button
        title="Go to Screen3"
        onPress={goToScreen3}}
      />
      </View>     
    </>
  );

function goToScreen3() {
  if(condition){
this.props.navigate.navigate('Screen3');
}}

如何传递道具以便我可以在第二个屏幕中使用导航？

Answer 1

Functional Component 中没有 this 绑定，所以你需要先从函数中获取 props

检查

const Screen2 = (props) => {

  return (
    <>   
      <View style={{ flex: 1 }}>
        <Button
        title="Go to Screen3"
        onPress={goToScreen3}}
      />
      </View>     
    </>
  );

function goToScreen3() {
  if(condition){
   props.navigate.navigate('Screen3');
  }
}
}

Answer 2

对于功能组件，有时通过 props 传递导航也很棘手。所以只需使用 withNavigation.

您必须导入它并用它包装函数。

import { withNavigation } from 'react-navigation';

const Screen2 = props => {

  const goToScreen3 = () => {
    if(condition){
    props.navigate.navigate('Screen3');
  }}

  return (
    <>   
      <View style={{ flex: 1 }}>
        <Button
        title="Go to Screen3"
        onPress={goToScreen3()}
      />
      </View>     
    </>
  );



export default withNavigation(Screen2)

在 React Native Navigation 中，如何将道具发送到我的屏幕？

In React Native Navigation, how do I send props to my screens?

javascript

reactjs

react-native

react-navigation

react-navigation-v5