react-native 的页面跳转

柔光的暖阳◎ 2022-04-23 00:52 213阅读 0赞

你需要先执行：

yarn add react-navigation
    # or with npm
    # npm install --save react-navigation

然后，安装 react-native-gesture-handler。 如果你使用 Expo，就什么都不需要做，他已经包含在 SDK 中 了， 否则：

yarn add react-native-gesture-handler
    # or with npm
    # npm install --save react-native-gesture-handler

先上一张目录图!

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70][]

用到的只有src下面的2个文件和App.js   后面我贴代码

1、MyPage.js

2、HomePage.js

import React, {Component} from 'react';
    import { View, Text, Button } from 'react-native';
    import { StackActions, NavigationActions } from 'react-navigation'; 
    
    export default class HomeScreen extends Component {
      render() {
        return (
          <View style={
       { flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            <Button
              title="Go to Details"
              onPress={() => {
                this.props.navigation.dispatch(StackActions.reset({
                  index: 0,
                  actions: [
                    NavigationActions.navigate({ routeName: 'Details' })
                  ],
                }))
              }}
            />
          </View>
        );
      }
    }

3、App.js

import React from 'react';
    import { View, Text, Button } from 'react-native';
    import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
    import HomeScreen from "./src/pages/home/HomePage";
    import DetailsScreen from "./src/pages/my/MyPage";
    
    const AppNavigator = createStackNavigator({
      Home: {
        screen: HomeScreen,
      },
      Details: {
        screen: DetailsScreen,
      },
    }, {
        initialRouteName: 'Home',
    });
    
    export default createAppContainer(AppNavigator);

就可以运行了，如果遇到了undefined is not an object (evaluating 'RNGestureHandlerModule.State'

请转往此处：[https://blog.csdn.net/quhongqiang/article/details/86597694][https_blog.csdn.net_quhongqiang_article_details_86597694]

采坑之路  欢迎讨论。！~~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20220323/b7e64214543741ac9f27fd673e6bc658.png
[https_blog.csdn.net_quhongqiang_article_details_86597694]: https://blog.csdn.net/quhongqiang/article/details/86597694