React Native Navigation：undefined 不是一个对象（评估'_this2.props.navigation.navigate

Question

我是 React Native 新手，正在学习“导航”。我的练习应用程序的流程是： App.js -> login.js -> dashboard.js -> updateUser.js ，工作正常。我也在使用 react-native-tab-view 库。当用户从 login.js 导航到 dashboard.js 时，他会看到 3 个选项卡，其中之一是 updateUser.js，它只有一个按钮，当我点击它时，我应该被重定向到再次 login.js。它给出的错误是：

TypeError: undefined is not an object (evaluating'_this2.props.navigation.navigate

当我在 dashboard.js 中粘贴相同的代码时，它工作正常。（我成功重定向到 login.js）。任何帮助将不胜感激。错误的可能原因是我不知道在哪里声明路线等。这是我的 updateUser.js

export default class UpdateInfo extends Component {
  render() {   
    return (
      <View style={styles.container}>
        <TouchableOpacity 
          style={styles.loginBtn}
          onPress={() => this.props.navigation.navigate('Login')}
          >
          <Text style={styles.loginText}>Go to Login</Text>
        </TouchableOpacity>
      </View>

    );
  }
}

这是我的App.js

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      initialRouteName="Login"
      screenOptions={{
        headerTitleAlign: 'center',
        headerStyle: {
          backgroundColor: '#fb5b5a',
        },
        headerTintColor: '#003f5c',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        
      }}>      
      <Stack.Screen 
        name="Login" 
        component={Login} 
        options={
          {title: 'Login'},
          {headerLeft: null} 
        }
      />
      <Stack.Screen 
       name="Dashboard" 
       component={Dashboard} 
       options={
         { title: 'Dashboards' },
         {headerLeft: null} 
       }
      />
    </Stack.Navigator>
  );
}


export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

我的dashboard.js

export default function Dashboard() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
        { key: 'first', title: 'ALL PROFILE'  },
        { key: 'second', title: 'ADD PROFILE' },
        { key: 'third', title: 'UPDATE INFO' },
      ]);
  const renderScene = ({ route }) => {
    switch (route.key) {
      case 'first':
        return <AllProfile />;
      case 'second':
        return <AddProfile />;
      case 'third':
        return <UpdateInfo/>
      default:
        return null;
    }
  }; 

  return (
    <TabView
      navigationState={{ index, routes }}
      renderTabBar={props => (
        <TabBar
          {...props}
          renderLabel={({ route, color }) => (
            <Text style={{ color: '#fb5b5a', fontWeight: "bold" }}>
              {route.title}
            </Text>
          )}
          style={{backgroundColor: '#003f5c'}}
        />
      )}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      style={styles.dashboardContainer}
    />
  );
}

Answer 1

您必须手动传递导航，因为它不是如下所示的屏幕，只有导航中的屏幕才会获得导航道具。如果它是一个功能组件，您可以使用 useNavigation 挂钩并访问导航。在你的情况下，你必须像下面那样做

export default function Dashboard({navigation}) {

和

<UpdateInfo navigation={navigation}/>

Answer 2

带挂钩

class UpdateInfo extends Component {
  render() {   
    return (
      <View style={styles.container}>
        <TouchableOpacity 
          style={styles.loginBtn}
          onPress={() => this.props.navigation.navigate('Login')}
          >
          <Text style={styles.loginText}>Go to Login</Text>
        </TouchableOpacity>
      </View>

    );
  }
}

// Wrap and export
export default function(props) {
  const navigation = useNavigation();

  return <UpdateInfo navigation={navigation} />;
}

React Native Navigation：undefined 不是一个对象（评估'_this2.props.navigation.navigate

React Native Navigation : undefined is not an object (evaluating '_this2.props.navigation.navigate

react-native

react-native-navigation