一篇搞懂React-Native

一篇搞懂React-Native

前言

提示：一篇针对RN项目开发的速成笔记，拥有它轻松掌握React-Native项目开发。

---

1、在项目目录中打开Powershell

2、在Powershell命令行中输入 初始化项目命令（使用react-native-cli）：react-native init <项目名称>

3、先要数据线链接手机或者打开模拟器

4.检查设备链接情况（先要链接手机并打开开发者模式或者打开模拟器）

5.进入项目目录 运行

react-native run-android
已启动项目

6.项目建设

6.1.导入注册插件使用的AppRegistry import {AppRegistry} from ‘react-native’

6.2.导入组件 MyHomePageApp——组件 import MyHomePageApp from ‘路径’ /组件 只能使用.js后缀的文件

 a.在RN中，不能使用网页中的所有标签，像div,p,img不能用 
 b.RN提供View来实现布局，需要的组件从'react-native'中导入  import {View,Text} from 'react-native'  具体见文档-组件
 c.在RN中，所有文本，必须使用RN提供的Text组件进行包裹，否则会报错
 d.Platfrom 平台检测const instructions = Platfrom.select({ });   StyleSheet 样式相关组件，专门用来创建样式的  const styles = StyleSheet.create({ })
 e.Image 组件   <Image source={ repuire('本地路径')  or   {uri:'url地址'}  }></Image>
 f.Button组件和ActivityIndicator组件 
 g.ScrollView组件和flatList组件
 h.tab栏需安装 react-native-tab-navigator 包 使用见文档UI  https://github.com/ptomasroos/react-native-tab-navigator
 i.icon图标推荐使用 react-native-vector-icons 包 安装环境步骤见文档 https://github.com/oblador/react-native-vector-icons  
  (1)装包, 
  (2)编辑 android/app/build.gradle文件，增加一下内容（带+号标记需增加项）

        ... ...
        import com.android.build.OutputFile
        + project.ext.vectoricons = [ iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ,'FontAwesome.ttf' ] // Name of the font files you want to copy 
           ]   
        + apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

     ，并启用FontAwesome.ttf字体文件库，修改iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ,'FontAwesome.ttf']
  (3)复制react-native-vector-icons包中Fonts文件内容至android/app/src/main/assets/fonts
  (4)编辑android/settings.gradle ，增加一下内容（带+号标记需增加项）

         + include ':react-native-vector-icons'
         + project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

   (5)编辑android/app/build.gradle，增加一下内容（带+号标记需增加项）

          dependencies {
   
            ...
            implementation "com.facebook.react:react-native:+"  // From node_modules
            + compile project(':react-native-vector-icons')
          }

   (6)编辑 android/app/src/main/java/...MainApplication.java，增加一下内容（带+号标记需增加项）

            package com.myapp;
            + import com.oblador.vectoricons.VectorIconsPackage;
            ....

            @Override
             protected List<ReactPackage> getPackages() {
   
                return Arrays.<ReactPackage>asList(
                     new MainReactPackage()
                 +   , new VectorIconsPackage()  ***安装 Android SDK License 29.0.1 后此步可省略
                 );
              }

     (7)' 需要安装Android SDK License 26.0.1   //***安装 Android SDK License 29.0.1 后此步可省略
     (8)import Icon from 'react-native-vector-icons/FontAwesome';
         const myIcon= <Icon name="rocket" size={30} color="#900" />;
    j.swiper轮播图推荐使用 react-native-swiper 包 安装步骤见文档: https://github.com/leecade/react-native-swiper
      * 轮播图的外面必须加一个有高度的外套View,需要自动轮播 autoplay=true  loop=true,见文档 *
    k.九宫格布局注意手机默认是纵向流式布局，要改变方向 flexDirection:'row',flexWrap:'wrap'
    l. router 路由推荐使用 react-native-router-flux 包及所需依赖包 安装步骤见文档: https://github.com/aksonov/react-native-router-flux
      * Router相当于React中的HashRouter 
      * Stack 是一个分组的容器，它不表示具体路由，专门用来给路由分组，路由规则 Scene 都要放在 Stack 中；
      * Scene 就表示一个具体的路由规则，好比React中的Route，其属性有key,component,title,path,hideNavBar,...;  key是编程式导航需要的，路由规则具有唯一性；component 为导航去到的目标组件；hideNavBar 是否隐藏导航栏;
      (1)装路由包及依赖包：yarn add react-native-router-flux  react-native-screens  react-native-gesture-handler  react-native-reanimated  react-native-safe-area-context  @react-native-community/masked-view 
      (2)引入路由包组件，创建导航目标组件和路由规则：

          import {
    Router , Stack , Scene } from 'react-native-router-flux'   
           <Router sceneStyle={
   {
   backgroundColor:'#FFFFFF'}}>