React-native项目笔记（window）

1. react-native官网：简介 · React Native 中文网。

2. 配置window下环境：下载对应版本的node，python，Android Studio...，配置环境变量。参考《React Native环境配置搭建（史上最详细教程）》

3. 搭建项目：

• 全局安装react-native-cli脚手架：npm install -g react-native-cl。
• 创建js项目my-project：npx react-native init my-project。
• 创建ts项目my-project：npx react-native init my-project --template react-native-template-typescript。
• cd my-project
• 启动项目：npx react-native run-android

4. 安装字体图标库：字体库：https://reactnative.directory/?search=react-native-vector-icons，https://oblador.github.io/react-native-vector-icons/

npm install --save react-native-vector-icons
npx react-native link react-native-vector-icons
import Icon from 'react-native-vector-icons/FontAwesome';

5. 路由跳转：https://wix.github.io/react-native-navigation/docs/before-you-start/

  npm install --save react-native-navigation
  npx rnn-link

  // 入口页面
  import {Navigation} from 'react-native-navigation';
  import App from './App';

  Navigation.registerComponent('App', () => App);

  // 欢迎页面
  const WelcomeScreen = {
    root: {
      stack: {
        id: 'WelcomeScreen',
        children: [
          {
            component: {
              name: 'App',
            },
          },
        ],
      },
    },
  };

  Navigation.events.registerAppLaunchedListener(() => {
    // 设置入口页面
    Navigation.setRoot(WelcomeScreen);
  });

6. 轮播图：https://github.com/leecade/react-native-swiper

 npm i react-native-swiper --save

7. 验证码库：https://github.com/retyui/react-native-confirmation-code-field

npm i react-native-confirmation-code-field --save

8. 数据存储：https://github.com/sunnylqm/react-native-storage

  npm install react-native-storage
  npm install @react-native-async-storage/async-storage
  react-native link @react-native-async-storage/async-storage

9. ctrl+m：关闭/开启调试模式

10. 多环境：https://github.com/luggit/react-native-config

  npm install react-native-config
  react-native link react-native-config  // react-native 0.60之前版本需要，知之后版本不需要

11. 配置绝对路径：路径取别名

  yarn add babel-plugin-module-resolver

  babel.config.js中配置：
  module.exports = {
    plugins: [
      [
        'module-resolver',
        {
          root: ['/src'],
          alias: {
            '@/pages': './src/pages',
          },
        },
      ],
    ],
  };

12. 接口文档管理工具：YApi

13. react-native-svg：引入 iconfont 的字体图标

14. 导航器：https://reactnavigation.org/docs/getting-started

  yarn add @react-navigation/native
  yarn add @react-navigation/native-stack
  yarn add react-native-screens react-native-safe-area-context

  // 在入口文件App.tsx或者index.tsx中
  import * as React from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';

  const Stack = createNativeStackNavigator();
  export default function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

15. 状态管理：redux，dva，redux-saga

  yarn add dva-core-ts react-redux

16. 全局状态管理：mobx-react

  npm i mobx mobx-react @babel/core --save
  yarn add  @babel/plugin-proposal-decorators --save

  //在项目的.babelrc或者是babel.config.js文件下配置：
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]