React Native 官方Demo改造计划（Vue转React）（一）

React Navigation

前置条件——

1.开发平台：Windows10， VS Code

2.目标平台：Android

3.已经创建好一个可以运行的项目：

React Native官方中文文档

版本号：“react-native”: “0.64.2”,
根据官方文档完成以下操作：

1.配置开发环境

2.创建AwesomeProject项目文件

配置依赖

React Navigation官方文档

版本号：“react-navigation”: "^4.4.4"

安装react-navigation

npm install react-navigation

将依赖项安装到React Native项目中

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

接下来，我们需要链接这些库。步骤取决于你的React Native版本:

React Native版本0.60及以上，链接是自动的，而本次项目React Native 的版本为0.64，因此无需额外操作；

0.59及以下，则需要手动，具体操作前往官网查看。

安装react-navigation-stack:

npm install react-navigation-stack @react-native-community/masked-view react-native-safe-area-context

配置jetifier来支持使用androidx的依赖:

npm install --save-dev jetifier

将其添加到package.json中的postinstall脚本中:

"scripts": {
  "postinstall": "jetifier -r"
}

运行postinstall脚本：

npm run postinstall

为了完成Android的react-native-gesture-handler的安装，对MainActivity.java做以下修改:

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+        return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

然后在入口文件的顶部添加以下内容，比如index.js或App.js:

import 'react-native-gesture-handler';

官方Demo目录结构介绍

目录	作用
android目录	android原生代码，使用Android Studio则打开此目录即可，打开整个AwesomeProject目录会报错
ios目录	ios原生代码，使用XCode则打开此目录即可
node_modules	基于node文件依赖产生的相关依赖和第三方lib
index.js	配置入口文件
App.js	入口
package.json	项目基本信息以及依赖信息

• 其他文件在此不作介绍，暂无改动

改造后的目录结构

主要新增src目录，子目录有config和pages目录：

​ config下主要存放配置文件，如路由配置文件route：

​ AppNavigator.js-页面跳转配置文件

​ BottomTabNavigator.js-底部导航栏配置文件（下期讲）

​ pages下主要存放页面文件，在此先添加Home/home页和Tools页：

​ 每个页面下存放三个文件，index.js,style,和view：

​ index.js-js操作文件

​ style-样式文件

​ view-HTML文件

1.页面导航

1.App.js

import React from 'react';
import AppContainer from './src/config/route/AppNavigator';

export default class App extends React.Component {
  render() {
    // 渲染容器内的页面
    return <AppContainer />;
  }
}

将所有官方Demo的代码注释或者删除，放入以上代码

解析：

代码第二行，目的是导入route中封装好的组件，并在App中渲染出来

2.AppNavigator.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from "react-navigation-stack";
import MyHome from '../../pages/Home/home';
import MyTools from "../../pages/Tools/index";

// 创建路由堆栈
const AppNavigator = createStackNavigator (
    {
    Home: MyHome,
    Tools: MyTools,
    },
    {
    initialRouteName: 'Home',
    }
);

// 创建容器
export default createAppContainer(AppNavigator);

解析：

第一行，导入创建App容器的方法

第二行，导入创建导航堆栈的方法

第三、四行，导入页面组件

第七行，用变量AppNavigator接收创建好的导航堆栈

initialRouteName为重定向初始页面

最后一行，将导航堆栈作为参数传递到创建App容器的方法中，然后导出为组件

3.Home

此处以Home页面为例

1.index.js

import React from 'react';
import view from './view';

export default class MyHome extends React.Component {
  render() {
    return (view(this.props))
  }
}

在本文件中，写js操作

解析：

第二行，导入view组件

第六行，渲染view组件，并传入MyHome的props

2.view.js

import React from 'react';
import { Button, Text, View } from 'react-native';
import styles from './style';

export default props => (
  <View style={styles.container}>
    <Text style={{ fontSize: 36 }}>Home</Text>
    <Button
      title="选择工具"
      // 路由跳转
      onPress={() => props.navigation.navigate("Tools")}
    />
  </View>
);

在本文件中，写页面HTML

解析：

第三行，导入自定义组件styles

第六行，使用styles组件中自定义的container样式

第十一行，页面跳转

3.style.js

import { StyleSheet } from "react-native";

export default styles = StyleSheet.create({
    container: {
        flex: 1,
        height: '100%',
        backgroundColor: '#EBEBEB',
    }
});

至此，一个最最最简单的页面导航完成了，底部导航栏下期再写，码累了。俺只是一个刚毕业的新人开发，这是俺第一回写文章，如果有不对的地方请多多指教，如果对你有帮助那就再好不过了，我们下期再见。