Question

我是新来的本地人，正在学习“导航”。我的练习应用程序的流程是：App.js-> login.js-> dashboard.js-> updateUser.js，它运行良好。我也在使用react-native-tab-view库。当用户从login.js导航到dashboard.js时，他会看到3个选项卡，其中一个是updateUser.js，该选项卡只有一个按钮，当我单击该按钮时，我想将其重新重定向到login.js。错误信息为：

TypeError：未定义不是对象（正在评估'_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

带钩子

fn update(&mut self, msg: Self::Message) -> ShouldRender {
    match msg {
        Msg::ChangeTheme => {
            let theme_cycle: [&str; 3] = ["light", "dark", "rust"];
            let current_theme = self.props.handle.state().theme.clone();
            // eval next theme
            let next_theme = match theme_cycle.iter().position(|x| x == &current_theme) {
                None => theme_cycle[0].to_string(),
                Some(i) => {
                    if i >= (current_theme.len() - 1) {
                        theme_cycle[0].to_string()
                    } else {
                        theme_cycle[i + 1].to_string()
                    }
                },
            };
            // set next theme
            self.props.handle.reduce(move |state| state.theme = next_theme.clone());
            // store it inside localstorage
        },
        Msg::ToggleLangDropdown => self.show_dropdown = !self.show_dropdown,
    };
    true
}

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

2 个答案: