第01课：项目初始化

落日映苍穹つ 2022-12-09 11:49 223阅读 0赞

知识点：

*  快速创建 RN 项目
 *  添加使用路由功能
 *  不要在 RN 中使用的功能

从这里开始，我们将一步一步的创建一个可以真正使用的 App：第一部分讲述开发一个 App 的大致过程，第二部分将开始优化性能、开发效率等，第三部分介绍添加热更新、支付、分享这些功能。大多数第三方组件可以很方便的 link 到项目里，部分需要手动导入甚至主动开发一些东西，这里也会在用到的时候讲出来。

### 创建项目的前提条件 ###

使用 React-Native 创建一个新的项目请确保电脑上已经满足下面的这些条件。

*  nodejs：RN 的所有库都是从 NPM 上安装的，请确保电脑上已经安装了 NPM，可以使用`npm -v`来查看当前是否已安装，当前项目使用的 Node 版本是 8.9.3，NPM 的版本是 5.5.3。
 *  react-native-cli：这个通常用作 RN 的初始化和启动模拟器等，使用 NPM 可以安装到电脑上。
 *  Python：RN 里面有些脚本是使用 Python 写的，请确保电脑上已经安装了 Python 2.7 以上的版本。
 *  JDK 1.8：安卓项目需要使用 JDK 1.8，请在电脑上安装好，安装的教程可以搜索其他资料。
 *  Android Studio：调试以及编译安卓代码需要使用到，请在安装 Android Studio 之后安装好 Android SDK 以及模拟器，模拟器可以使用市面上的安卓模拟器，它们普遍比自带的模拟器要快，闲麻烦的读者可以直接连接手机调试。在安装好 IED 之后请下载好需要使用到的 Android SDK，下载 SDK 需要科学上网或者把下载地址替换成国内的几个下载源。
 *  Git：后面的项目会加入到 Git 中，使用 Git 做版本管理的好处不言而喻。
 *  Xcode（仅 iOS 项目中）：安装了 Xcode 才能使用 iOS 模拟器，iOS 模拟器下的开发速度要明显优于安卓下，后面的开发过程大多数也是在 iOS 模拟器中进行的。在模拟器中的表现都差不多，有些不一样的效果可以在看到的时候单独调试。
 *  Watchman（仅 Mac 系统用到）：Watchman 用来监听文件变动等，Mac 下必须安装 Watchman。
 *  VSCode：文中演示项目使用的编辑器是 VSCode，这里也推荐使用 VSCode 开发前端项目。

### 创建项目 ###

我们先在本地创建一个可运行的项目，同时这个项目会加入到 Git 的版本管理中。

（1）执行`react-native init anxintao --version 0.53.0`。

![enter image description here][]

*  图中1代表之前安装的 react-native-cli 的命令。
 *  图中2代表初始化命令。
 *  图中3代表项目的名称，这里是`anxintao`。
 *  图中4代表指定 RN 的版本号，这个参数不传默认使用最新版。
 *  图中5代表 RN 具体使用的版本号。

（2）使用 VSCode 打开项目，在项目根目录下执行命令启动初始化之后的项目，Mac 下推荐`react-native run-ios`，Window 下推荐`react-native run-android`启动默认的项目。如果能启动说明项目初始化完成，否则说明项目的某些东西没有安装好。

![enter image description here][enter image description here 1]

这里推荐把启动的命令写入到 package.json 文件中，比如，输入`npm run ios`即可代替原来的`react-native run-ios`，输入命令的速度快了不少，也可以给 VSCode 安装一个启动 RN 的插件，不过效果跟输命令差不多，具体要看个人习惯了。

（3）到这里就说明项目创建成功了，这个项目现在还很简单，它的原生部分只有一个简单的空壳，这个空壳仅仅是初始化了一个 RN 的 Activity，所有的 JS 都是运行在根视图上的。

（4）这里注意一下，新建的项目提示了按键可以刷新页面或者调出菜单，这显示的是 iOS 模拟器，按键为`command R`刷新和`command D`调出菜单。

### 添加路由 ###

一个完整的项目不能没有路由，这里使用 [React Navigation][]。

在写文章的时候已经有一个路由组件`react-native-navigation`热度超过了 react-navigation，它更多的使用的是原生的路由切换，效果更好，想用的读者可以去尝试一下。

*  安装路由，在根目录下执行`npm install --save react-navigation`。
 *  在根目录下新建`src`目录，所有页面放入这个文件夹下。
 *  新建一个首页，给后面的路由调用，页面路径为`根目录/src/home/index.js`
    
    \`\`\` javascript 'use strict';
    
    import React from 'react'; import \{ StyleSheet, View, Text \} from 'react-native';
    
    export default class extends React.Component \{ render() \{ return <View style=\{ \{ marginTop: 200 \}\}> <Text>这是首页</Text> </View> \} \} \`\`\`

修改根目录下的`index.js`，添加整个项目的路由。

\`\`\` javascript import \{ AppRegistry \} from 'react-native'; import Pages from './src'; //启动 AppRegistry.registerComponent('anxintao', () => Pages);

在 src 目录下新建`index.js`文件，在这个文件里添加路由，这里从简单的一个页面开始。

javascript 'use strict';

import React from 'react'; import \{ StyleSheet \} from 'react-native'; //添加路由组件 import Navigation from 'react-navigation';

//添加展示用的首页 import Home from './home/index'

//创建路由 const Pages = Navigation.StackNavigator(\{ 'Home': \{ screen: Home \} \}, \{ //这里做了一个页面跳转的动画 transitionConfig: () => (\{ screenInterpolator: sceneProps => \{ const \{ layout, position, scene \} = sceneProps; const \{ index \} = scene; //设置页面跳转的动画 const translateX = position.interpolate(\{ inputRange: \[index - 1, index, index + 1\], outputRange: \[layout.initWidth, 0, 0\] \}); const opacity = position.interpolate(\{ inputRange: \[index - 1, index - 0.99, index, index + 0.99, index + 1\], outputRange: \[0, 1, 1, 0.3, 0\] \}); return \{ opacity, transform: \[\{ translateX \}\] \}; \} \}), navigationOptions: \{ header: null \} \});

//创建一个自己的容器,方便以后对路由做一些处理 export default class extends React.Component\{ constructor(props) \{ super(props); \}

render() {
        return <Pages onNavigationStateChange={this.listenChange.bind(this)}></Pages>;
    }
    //监听路由的跳转
    listenChange(state1, state2, action) {
    
    }

添加完成之后删除掉初始化项目之后的 App.js，这个时候在模拟器中使用快捷键`command+R`即可刷新刷新页面。
    
    <img src="http://images.gitbook.cn/479e89e0-1876-11e8-8087-9b6b3b447adf"  width = "40%" />
    
    至此就完成了简单的路由设置，之后只需要添加页面并在路由中注册即可使用。
    
    ### 路由升级版
    
    简单的路由并不能起到很好的作用，我们还是创建一个更实用的路由吧，比如带 3 个 tab 切换的首页，这也是大多数 App 使用套路。
    
    添加 4 个 tab 切换页，我们假定未来需要 4 个切换页，分别是首页、分类页、购物车、个人中心，在 home 下分别创建他们。
    
    <img src="http://images.gitbook.cn/084841b0-187a-11e8-8087-9b6b3b447adf"  width = "50%" />
    
    修改路由所在的 index 文件，引入下面要用到的几个组件和页面。
    
    添加新加入的页面：

javascript import React from 'react'; import \{ StyleSheet, Image \} from 'react-native'; //添加路由组件 import Navigation from 'react-navigation'; //添加展示用的首页 import Home from './home/index' import Products from './home/products' import Shop*Cart from './home/shop*cart' import My from './home/my'

创建底部的样式：

javascript //创建tab页的顶部样式 const styles = StyleSheet.create(\{ tab: \{ height: 40, backgroundColor: '\#fbfafc', borderTopColor: '\#efefef' \}, tabIcon: \{ width: 20, height: 20 \}, tabLabel: \{ marginBottom: 4 \} \})

创建一个 tab 路由，为了简单这里只展示 2 个页面的，具体的代码可以去 Git 仓库查看。

javascript

//创建首页的tab页 const Tabs = Navigation.TabNavigator(\{ 'Home': \{ screen: Home, navigationOptions: (\{ navigation, screenProps \}) => \{ return \{ tabBarLabel: '首页', tabBarIcon: (opt) => \{ if (opt.focused) return <Image source=\{ \{ uri: require('./images/tab-home-active') \}\} style=\{styles.tabIcon\}></Image>; return <Image source=\{ \{ uri: require('./images/tab-home') \}\} style=\{styles.tabIcon\}></Image>; \} \} \} \}, 'Products': \{ screen: Products, navigationOptions: (\{ navigation, screenProps \}) => \{ return \{ tabBarLabel: '产品分类', tabBarIcon: (opt) => \{ if (opt.focused) return <Image source=\{ \{ uri: require('./images/tab-products-active') \}\} style=\{styles.tabIcon\}></Image>; return <Image source=\{ \{ uri: require('./images/tab-products') \}\} style=\{styles.tabIcon\}></Image>; \} \} \} \}, \}, \{ //设置tab使用的组件 tabBarComponent: Navigation.TabBarBottom, //点击哪个才加载哪个tab里的页面 lazy: true, //设置tab放在界面的底部 tabBarPosition: 'bottom', //设置tab里面的样式 tabBarOptions: \{ style: styles.tab, labelStyle: styles.tabLabel, activeTintColor: '\#d0648f' \} \});

替换 Pages 里的第一个页面为刚才创建的 tab 路由。由于默认加载第一个，所以需要将第一个设置成 tab 页。

javascript 'Tabs': \{ screen: Tabs \} \`\`\`

现在再刷新模拟器，就会发现底部的 tab 切换已经好了，点击可以切换不同的页面。

![da200e80-187e-11e8-8087-9b6b3b447adf][]

这里将图片转化成 base 64 的方式再引入到图片组件中，好处是打包之后会变成一个整体，坏处是打包之后的 bundle 文件会变大，做增量更新也比较麻烦。

### 不推荐使用的东西 ###

*  投影：安卓不支持投影，在开发的时候如果没有必要就使用别的方式代替吧，比如使用图片代替投影。
 *  边框色：在长列表中尽量不要使用边框色，在某些安卓手机下会闪退。
 *  使用了圆角的情况再使用背景色：iOS 手机会出现边框颜色异常或者异常色块，去掉背景即可。
 *  过于深层次的结构。
 *  过于频繁的刷新 state。

[enter image description here]: /images/20221123/9bf0953932344b0397d3692135d58b43.png
[enter image description here 1]: /images/20221123/c3a1d426c2a74067902aadca9acf8e9a.png
[React Navigation]: https://reactnavigation.org/
[da200e80-187e-11e8-8087-9b6b3b447adf]: /images/20221123/7b7003d17d3840d79d5f6476fc12d92b.png