React Native

搭建windows开发环境

https://juejin.cn/post/6978058726720667684
1、react-native初始化的坑
如果 react-native init myApp运行完只出现两个文件？
这个是什么原因呢？  
因为近期rn更新，某些东西不适配，然后暂时能找到的方法就是指定较低版本的rn。
解决方案:
react-native init FirstApp --verbose --version 0.53.0

2、react-native要求：Node的版本必须大于10

3、安装react-native命令行工具
npm install -g react-native-cli

4、Android SDK需要运行在JDK上，所以要安装java环境，可以不安装Android Stdio，但需要安装Android SDK。

5、npx react-native run-android 
在android目录main文件下创建assets文件夹，用来生成index.android.bundle文件，运行以下命令：
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

运行上述命令任不能生成文件，需要休改node_modules里面的blacklist.js
将第一行正则斜杠/，＋转移符号\即可。


6、连接夜神模拟器
adb connect 127.0.0.1:62001（以管理员身份打开cmd运行）
进入myApp项目，运行 react-native run-android
按PgDn键 ---> 设置连接你电脑的ip 

基础环境搭建

-   安装 Node.js

    -   Node.js 的版本应 >=12 (推荐安装 LTS 版本）
    -   npm config set registry [registry.npm.taobao.org](https://link.juejin.cn?target=https%3A%2F%2Fregistry.npm.taobao.org "https://registry.npm.taobao.org")

-   安装 Yarn

    -   npm install -g yarn

-   安装 React Native 脚手架

    -   npm install -g react-native-cli

搭建安卓环境

-   安装 JDK：JDK是Java开发的一个套件，Android应用要跑在Java环境上

-   安装 Android Studio：保证安卓能正常运行的环境，同时也是一款编辑器，安卓工程师使用它进行代码开发。这里安装 Android Studio主要是为了安装 Android SDK

-   安装 Android SDK：安卓开发需要用到的一些套件

-   配置环境变量

安装JDK

-   下载 JDK（Java SE Development Kit）

    -   [www.oracle.com/java/techno…](https://link.juejin.cn?target=https%3A%2F%2Fwww.oracle.com%2Fjava%2Ftechnologies%2Fjavase%2Fjavase-jdk8-downloads.html "https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html")

-   JDK 的版本必须是 1.8（1.8 版本，官方也直接称 8 版本）

    -   目前不支持高于 1.8 的JDK版本

-   下载时要求登录（请先注册 Oracle 账号）

-   安装 JDK （一直下一步）

    -   命令行中输入 java -version，验证安装是否成功

安装Android SDK

-   What

    -   Android SDK 是针对安卓开发的套件

-   Why

    -   虽然 Android Studio 默认会安装最新版本的 Android SDK，但是目前编译 React Native 应用需要的是 Android 10（Q）版本的SDK

-   How

    -   打开 Android Studio，在菜单 Tools 下找到 “SDK Manager”

配置环境变量

-   配置 ANDROID_HOME 环境变量

    -   打开 Android Studio，点击菜单 Tools -> SDK Manager，找到 Appearance & Behavior -> System Settings -> Android SDK

查看 Android SDK 安装的路径：

配置环境变量：

-   跟 ANDROID_HOME 相关的环境变量

    -   %ANDROID_HOME%\platform-tools
    -   %ANDROID_HOME%\emulator
    -   %ANDROID_HOME%\tools
    -   %ANDROID_HOME%\tools\bin

搭建IOS环境

1.  安装 Watchman: 监控文件变化
2.  安装 Xcode：用来开发IOS/MAc应用
3.  安装 CocoaPods：IOS/MAC项目的依赖管理工具，类似于Node.js的npm

-   Watchman

    -   brew install watchman

-   Xcode

    -   React Native 目前需要 Xcode 10 或更高版本。可以通过 App Store 下载

-   CocoaPods

    -   brew install cocoapods

初始化项目

1.  创建项目
1.  安装 VS Code 插件
1.  调试工具

-   1.  创建项目

    -   初始化项目 react-native init myproject

    -   进入项目 cd myproject

    -   运行项目

        -   Android：yarn android

        -   IOS：

            -   cd ios && pod install && cd ../
            -   yarn ios

-   2.  安装 VS Code 插件

    -   ES7 React/Redux/GraphQL/React-Native snippets

        -   快捷命令：rnc (react native class)
        -   快捷命令：rnf (react native function)

-   3.  调试工具

    -   模拟器调试

        -   模拟器是安装在电脑上的，虚拟的手机界面
        -   模拟器一般跟随Android Studio 和 Xcode 一起安装
        -   启动应用，模拟器会一起启动

    -   真机调试

        -   打开 USB 调试模式
        -   通过 USB 先将电脑和手机连起来
        -   启动应用，在手机上安装应用 模拟器调试：

-   点击模拟器（使模拟器获取焦点）

-   快捷键 ctrl + m

-   点击 debug

-   自动跳转到浏览器。

连接出自

juejin.cn/post/697805…

声明式渲染、命令式渲染

react是声明式渲染的，也就是模板渲染，
命令式渲染也就是DOM渲染，先找到document.getElementById，每一步都需要告诉程序怎么去做。

JSX语法

"组件名"首字母要大写
"标签名"首字母小写
"样式属性名称"采用驼峰命名

2、如何注释？

开发注意事项

1、RN里面没有HTML，所以也就没有div
<View>\<Text>
2、样式没办法继承，不像HTML,但是可以覆盖
3、不用写像素单位，padding:20;
4、写样式必须用驼峰命名；

React Native路由导航

导航方式主要有三种：堆栈导航（StackNavigator）、选项卡导航（TabNavigator）、抽屉导航（DrawerNavigator）

用的最多的还是堆栈导航StackNavigator，首先我们要安装一些依赖：

# 安装导航的核心库
yarn add @react-navigation/native

# 安装导航的外部依赖库
yarn add react-native-screens react-native-safe-area-context

# 安装堆栈导航的主要库
yarn add @react-navigation/native-stack

要在项目里使用导航，我们首先要在项目的根组件创建一个路由导航容器，将我们的路由都包裹（一般是在App.js中），有点类似于Vue的<router-view />：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
    {/* 导航组件 */}
    </NavigationContainer>
  );
}

我们新建一个StackRouter.js，将所有的堆栈导航配置统一在这个文件配置：

// StackRouter.js
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}
export default function StackRouter() {
  return (
    <Stack.Navigator>
      <Stack.Screen
          name="Home"
          component={HomeScreen}
      />
    </Stack.Navigator>
  );
}

在根组件中引入我们的堆栈导航组件即可：

// App.js
import StackRouter from './src/StackRouter';
export default function App() {
  return (
    <NavigationContainer>
      <StackRouter></StackRouter>
    </NavigationContainer>
  );
}

我们可以在每个路由上通过options配置不同参数，比如标题、导航栏颜色等：

<Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
        title: '首页',
        headerStyle: {
            height: 80,
            backgroundColor: '#2196F3',
        },
    }}
/>

有时候，我们想要给一个页面传入额外的参数，我们可以把页面组件放到上下文中包裹，并传入props：

<Stack.Screen name="Home">
  {(props) => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

zhuanlan.zhihu.com/p/553544088