Skip to content
私塾国际学府 React Native 团队开箱即用项目模板
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
__tests__
app
docs
types
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.huskyrc.js
.npmignore
.prettierignore
.prettierrc.js
.travis.yml
CODE_OF_CONDUCT.md
CONTRIBUTING.md
ISSUE_TEMPLATE.md
LICENSE
README.md
_gitignore
babel.config.js
dependencies.json
devDependencies.json
index.js
jest.config.js
lint-staged.config.js
metro.config.js
package.json
setup.js
tsconfig.json
yarn.lock

README.md

🎨react-native-template-sishu

MIT License npm version npm CONTRIBUTING CHANGELOG

私塾国际学府 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/repositoriesallprojects/repositories

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

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.javanew 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 代码如下
echo "In the build time script run."
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

启动屏(防止启动白屏)

热更新

其他文档

相关项目

You can’t perform that action at this time.