React-Native笔记（一）—— 如何实现页面间的跳转

一、序言

• 最近课题组分配到一个项目，有个移动端的开发需求，技术定为React Native。之前没有学过React等前端框架，只好临时学了。那就一起来学习吧！
• 选择React Native是有多方面好处的。React Native是FaceBook于2015年3月发布的一个跨平台移动开发框架。React Native是在React框架的基础上，底层通过对IOS和Android平台的原生代码的封装和调用，我们直接通过js调用组件即可（部分组件Android和IOS不通用，需要进行分开）。

二、开发环境和工程结构

1、开发工具

• JDK 1.8 + WebStorm + IDEA/Android Studio
• 由于之前自己玩过Android，所以Android开发环境已经搭建好了。Android开发环境搭建略麻烦，会有一些坑。具体的开发环境搭建已经有不少的帖子讲啦，这里不再赘述。

2、工程目录结构

这是项目的框架结构，src是我新建的目录，用来存放前端代码。项目整体结构如下：

三、第一个项目

1、Terminal 进入一个你想存放代码的目录,执行命令创建项目

react-native init RNDemo01

2、进入项目目录，并启动

cd RNDemo01
react-native start

3、使用idea打开Android目录，或者使用Xcode打开IOS目录，启动项目，运行。

四、实现页面跳转

1、用WebStorm（或者你喜欢的前端开发IDEA）打开工程，新建目录结构如序言截图所示。

2、导入项目依赖

• 打开项目根目录的package.json文件，在dependencies下添加以下依赖，这里采用的是react-navigation实现。

	"react-navigation": "^4.4.2",
    "react-navigation-stack": "^1.8.1",
    "react-native-screens": "^2.11.0"

• 写好后，根据提示安装依赖

3、MainScreen.js文件

import React, {
    
    Component} from 'react';
import {
    
     View, Text, Button } from 'react-native';
import {
    
     StackActions, NavigationActions } from 'react-navigation';

export default class MainScreen 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>
        );
    }
}

4、TwoScreen.js文件

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

export default class TwoScreen extends Component{
    
    
    render() {
    
    
        return (
            <View>
                <Text>这是第二个页面</Text>
            </View>
        );
    }
}

5、项目入口文件

/**
 * @format
 */
import React from 'react';
import {
    
     createAppContainer, StackActions, NavigationActions } from 'react-navigation';
import {
    
    createStackNavigator} from 'react-navigation-stack'
import HomeScreen from "./src/pages/main/MainScreen";
import DetailsScreen from "./src/pages/two/TwoScreen";
import {
    
     AppRegistry } from 'react-native';
import {
    
    name as appName} from './app.json';

const AppNavigator = createStackNavigator({
    
    
    Home: {
    
    
        screen: HomeScreen,
    },
    Details: {
    
    
        screen: DetailsScreen,
    },
}, {
    
    
    initialRouteName: 'Home',
});

const App = createAppContainer(AppNavigator);

AppRegistry.registerComponent(appName, () => App);

6、运行结果