🎨react-native-template-sishu

私塾国际学府 React Native 团队开箱即用项目模板

🎉 特性

• 无缝集成到 React Native CLI 中！✨
• 与默认的 React Native 模板一致
• 优雅地集成 axios、mobx、react-navigation
• 使用一个有经验的项目目录结构
• 使用一个有经验的 VSCode 配置
• 支持相对根目录引入文件(默认根目录 src)
• 优雅地声明全局变量（通过定义命名空间）

🚀 快速开始

这部分的配置都是必须要配置的，如果要跳过，请确保删除了项目中已有的相关配置（不推荐）

初始化项目

react native 0.60 做了较大的改动，暂不支持

$ react-native init MyApp --template sishu --version 0.59.10

超六的 npm 工作流程

{
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "ios:debug": "node node_modules/react-native/local-cli/cli.js run-ios",
    "ios:bundle": "react-native bundle --entry-file index.js --bundle-output ./ios/index.ios.bundle --platform ios --dev false --assets-dest ./ios --sourcemap-output ./ios/index.ios.bundle.map",
    "gradle:clean": "cd android && ./gradlew clean",
    "an:bundle": "react-native bundle --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --dev false --assets-dest ./android/app/src/main/res --sourcemap-output ./android/app/src/main/assets/index.android.bundle.map",
    "an:debug": "yarn gradle:clean && node node_modules/react-native/local-cli/cli.js run-android",
    "an:release": "yarn gradle:clean && cd android && ./gradlew assembleRelease",
    "an:installRelease": "yarn gradle:clean && cd android && ./gradlew installRelease",
    "an:staging": "yarn gradle:clean && cd android && ./gradlew assembleReleaseStaging",
    "an:installStaging": "yarn gradle:clean && cd android && ./gradlew installReleaseStaging",
    "an:keygen": "keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 36500",
    "an:key-debug": "keytool -list -v -keystore ~/.android/debug.keystore",
    "an:key-release": "keytool -v -list -keystore ./android/app/my-release-key.keystore"
  }
}

安卓配置

Maven 仓库

将以下代码配置到 android/build.gradle 配置文件的 buildscript/repositories 和 allprojects/repositories 下

maven{
    url 'http://maven.aliyun.com/nexus/content/groups/public/'
    name 'aliyun'
}
...
// 请务必将jitpack放在最后
maven {
    url "https://jitpack.io"
    name 'jitpack'
}

• aliyun: 为了加快下载速度
• jitpack: 为了解决 react-native-image-crop-picker Could not find com.github.yalantis:ucrop:2.2.1-native的问题

shell 文件的坑

为了安全性 shell 文件默认都是不可执行的，当然也包括 android/gradlew 这个用来打包的脚本文件，这会给持续集成带来麻烦：运维同学默认是执行不了我们的打包命令的。解决办法很简单：

$ git update-index --add --chmod=+x android/gradlew

处理系统字体

在 android\app\src\main\java\com\appName\MainActivity.java 文件中加入如下代码：

...
import android.content.res.Configuration;
import android.content.res.Resources;
...

public class MainActivity extends ReactActivity {
  ...
  // 让文字不随系统文字变化：http://t.cn/Rs26Veb
  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    if (newConfig.fontScale != 1)//非默认值
    getResources();
    super.onConfigurationChanged(newConfig);
  }
  @Override
  public Resources getResources() {
    Resources res = super.getResources();
    if (res.getConfiguration().fontScale != 1) {//非默认值
      Configuration newConfig = new Configuration();
      newConfig.setToDefaults();//设置默认
      res.updateConfiguration(newConfig, res.getDisplayMetrics());
    }
    return res;
  }
  ...
}

react-native-gesture-handler 配置

为了完成 react-native-gesture-handler 在 Android 上的安装，请确保在 MainActivity.java 上完成如下修改：

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+        return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

react-native-config-reader

打开 android/app/src/main/packageName/MainApplication.java 把 new RNConfigReaderPackage() 替换为 new RNConfigReaderPackage(BuildConfig.class)

自定义 BuildConfig 请戳 http://t.cn/AipENa1O

高级配置

• 安卓高级配置

权限

<!--拍照-->
<uses-permission android:name="android.permission.CAMERA"/>
<!-- 前置摄像头 -->
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />

ios

react-native-config-reader

由于插件需要读取系统配置，我们需要手动在 info.plist 中添加一些字段

1. 添加 BUILD_TYPE，取值为 $(CONFIGURATION)
2. 添加 BUILD_TIME,取值为空，并通过脚本在每次编译的时候对其更新，脚本添加步骤 Target-> Build Phases -> + -> New Run Script Phase, Shell 代码如下

#!/bin/bash
infoplist="$BUILT_PRODUCTS_DIR/$INFOPLIST_PATH"
builddate=`date +%Y-%m-%d_%H:%M`
if [[ -n "$builddate" ]]; then
/usr/libexec/PlistBuddy -c "Set :BUILD_TIME $builddate" ${infoplist}
fi

权限

• Privacy - Camera Usage Description
• Privacy - Photo Library Usage Description
• Privacy - Microphone Usage Description

启动屏（防止启动白屏）

• react-native-splash-screen
• react-native-splash-screen-ios.md

热更新

• react-native-code-push

其他文档

• 基于官方模版的变动之处
• 如何删除不想要的依赖？
• 踩过的坑

相关项目

• react-native-template-typescript：干净简约的 React Native 模板，可快速启动 TypeScript
• react-native-template-rocketseat-basic: 具有 Rocketseat 中使用的结构的 React Native 应用程序的基本模板
• awesome-react-native:Awesome React Native components, news, tools, and learning material!
• awesome-mobx
• react-typescript-cheatsheet: react typescript 备忘录