ReactNative

0 搭建环境

1. 安装原生Android环境，官方文档 + 博客

2. 下载React-Native

npm install -g react-native-cli
# 进入项目文件夹的父目录下打开cmd，输入以下命令
react-native init myProjec

3. 打开安卓模拟器的开发者选项

1 开发工具

• WebStorm

2 创建项目

2.1 New Project

• 注意使用电脑上已经安装的react-native包，例如：
• C:\Program Files\nodejs\node_global\node_modules\react-native-cli

2.2 设置快捷启动

• 详见博客：https://www.jianshu.com/p/85d8e5e1c22d

2.3 设置Debugger

• 下载react-native-debugger – https://github.com/jhen0409/react-native-debugger/releases/tag/v0.11.7
• 启动react-native-debugger.exe
• 在模拟器中按下CTRL+M，启用Debug，即可成功

2.4 启动代码补全

• 详见博客：https://blog.csdn.net/aa330233789/article/details/103134580

2.5 启动模板

• 详见博客：https://blog.csdn.net/weixin_38080573/article/details/88315159
• 一般来说，WebStorm自带许多模板，已经足够了，上述是自定义模板

2.6 WebStorm常用快捷键

• 详见博客：https://www.cnblogs.com/wanglexueshilengde/p/8390730.html

2.7 关闭ESlint检查

3 编码问题汇总

3.1 样式规范编写

• 详见博客：https://segmentfault.com/a/1190000013332489

3.2 开源复用组件

• UI组件库：https://reactnativeelements.com/docs/
• icon库：https://oblador.github.io/react-native-vector-icons/

4 常见用法

4.1统一获取表单输入框值

saveInputData = (dataType) => {
  // console.log(dataType,"dataType");
  return (event) => {
    // console.log(event,"event");
    this.setState({
      [dataType]: event,
    });
  };
};

4.2 圆角按钮属性

borderRadius

4.3 动态修改组件样式

state = {
  buttonColor: Color.font.alleviate,
};
<Button
  buttonStyle={{ ...styles.button, backgroundColor: this.state.buttonColor }}
/>

4.4 TouchableOpacity取消点击后的透明度变化

// activeOpacity={1}
// 注意不是样式属性，不能写在样式里
<CheckBox
  center
  containerStyle={styles.checkBox}
  activeOpacity={1}
  title="请阅读同意"
  textStyle={styles.tipsFont}
  iconType="material-icons"
  checkedIcon="check-circle"
  checkedColor={Color.font.alleviate}
  uncheckedIcon="radio-button-unchecked"
  onPress={this.checkAgreement}
  checked={this.state.agreementChecked}
/>

4.5 alignSelf属性值

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
stretch	元素被拉伸以适应容器。
center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

4.6 控制Flex子元素在主轴上的比例

// 属性名
flexGrow

4.7 文本自动换行

<Text style={styles.infoFont} selectable={true}
                  textBreakStrategy="balanced"></Text>

4.8 原生组件官方文档

• API文档：https://reactnative.cn/docs/text

4.9 Navigation使用

• 官方中文文档：TabNavigator · React Navigation中文网

4.10 组件自动换行

flexWrap:"wrap",

4.11 FlatList用法

• 详见博客：React-native FlatList的基本用法 - 简书 (jianshu.com)

4.12 导航栏使用

• 详见博客： React Native 的顶部导航栏和底部导航栏目_铁柱的博客-CSDN博客

4.13 TabNative 5.0

• 官方文档：https://www.npmjs.com/package/react-native-tab-navigator

4.14 Android项目gradle包下载目录

• 示例：C:\Users\用户.gradle\caches\modules-2\files-2.1\com.alexvasilkov\foldable-layout\1.0.1\59a9dd35f8d31de01991ee56b741e9e992914895\foldable-layout-1.0.1-sources.jar

4.15 报错:app:mergeDexDebug FAILED解决方法：

• 在android/app/build.gradle文件中添加如下代码:

dependencies {
  implementation 'com.android.support:multidex:1.0.3' //enter the latest version,
}
android {
    defaultConfig {
        multiDexEnabled true
    }
}

• latest version：https://developer.android.google.cn/studio/build/multidex?hl=zh-cn

4.16 WebStorm中js文件被识别为txt文件

• 详见博客：https://blog.csdn.net/lansura/article/details/52756614
• 如果没有解决，可以手动加入index.js文件，apply之后再删除，再apply。

4.17 Style 详细说明

• 详见博客：https://www.jianshu.com/p/2b4368569c03

4.18 查看项目无法启动的错误报告

// 控制台下
android>gradlew assembleDebug --info

4.19 无法将类 JMessageReactPackage中的构造器 JMessageReactPackage应用到给定类型

• 使用“探花APP” React-Native教程的plugin.md文档

// 将Project根目录下react-native.comfig.js文件中的代码改为如下
module.exports = {
  dependencies: {
    'jmessage-react-plugin': {
      platforms: {
        android: {
          // 原来是packageInstance: 'new JMessageReactPackage(false)'
          packageInstance: 'new JMessageReactPackage()'
        }
      }
    },
  }
};

4.20 报错INSTALL_FAILED_INSUFFICIENT_STORAGE

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="xxx" android:installLocation="preferExternal" //增加这行代码！ android:versionCode="1" android:versionName="1.0" >

4.21 样式问题Debug

• 设置border或者backgroundColor
• 设置flex:1可以使得左右各占一半。