npx react-native init AwesomeTSProject --template react-native-template-typescript
npx react-native run-android
-
npm install react-native-config -S
-
根目录创建 .env 文件
API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh
-
android/app/build.gradle
文件最后添加apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
-
文件中使用
import Config from "react-native-config";
Config.API_URL; // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY; // 'abcdefgh'
-
npm install babel-plugin-module-resolver -D
-
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
alias: {
'@/utils': './src/utils',
'@/pages': './src/pages',
'@/navigator': './src/navigator',
'@/models': './src/models',
'@/config': './src/config',
'@/assets': './src/assets',
},
},
],
],
};
tsconfig.json
"baseUrl": "./src", /* Base directory to resolve non-absolute module names. */
"paths": {
"@/assets/*":["assets/*"],
"@/components/*":["components/*"],
"@/config/*":["config/*"],
"@/models/*":["models/*"],
"@/navigator/*":["navigator/*"],
"@/pages/*":["pages/*"],
"@/utils/*":["utils/*"],
},
-
npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
-
堆栈式导航器
npm install @react-navigation/stack
-
标签导航器
npm install @react-navigation/bottom-tabs
npm install dva-core-ts react-redux -S
npm install @types/react-redux -D
npm install dva-loading-ts -S
-
npm install react-native-svg -S
-
npm install react-native-iconfont-cli -D
用纯JS把iconfont.cn的图标转换成RN组件,不依赖字体,支持多色彩,支持热更新 -
生成配置文件
npx iconfont-init
-
修改
iconfont.json
文件 -
开始生成React-Native标准组件
npx iconfont-rn
npm install @react-navigation/material-top-tabs react-native-tab-view -S
npm install react-native-snap-carousel -S
npm install @types/react-native-snap-carousel -D
npm install react-native-linear-gradient -S
npm install react-native-linear-animated-gradient-transition -S
StyleSheet.compose(indicatorStyle,styles.whiteBackgroundColor)
npm install @react-native-community/async-storage -S
只支持字符串类型
npm install react-native-storage -S
二次封装
npm install lodash @types/lodash -S
npm install react-navigation-header-buttons -S
npm install react-native-drag-sort -S
npm install dva-model-extend -S
declare module '*.png';
npm install @react-native-community/blur -S
react native是有手势响应系统的,比如View组件就有一系列的函数用来响应用户的手势操作,但是这个系统是在js线程上的。但是react native中又有一些组件是使用原生组件渲染的,比如ScrollView,这就导致View组件的函数无法阻止原生组件的一些响应,比如想在ScrollView中创建一个不滚动的区域,这是做不到的,而且运行在js线程上,性能也较差一些
社区更好用的手势响应库 react-native-gesture-handler
npm install react-native-sound -S
npm install react-native-slider-x -S
底层以来react-native-svg, 生成圆形进度条
npm install react-native-circular-progress -S
npm install realm -S
npm install react-native-video react-native-video-custom-controls -S
npm i --save-dev @types/react-native-video
npm install formik -S
npm install yup -S
npm install @types/yup -D
npm install react-native-root-toast -S
-
npm install react-native-splash-screen -S
项目刚打开后会有一段时间白屏,因为react要去加载js 原理: 在应用刚加载时显示一张图片,等到js加载完成后,在需要的时机将图片替换掉 -
创建安卓布局文件 在
\android\app\src\main\res
(用来存放android的资源文件,安卓系统会对mipmap文件夹下的图片进行纹理技术优化)创建文件夹layout layout文件夹中创建文件launch_screen.xml
, 这是应用刚打开时显示的页面
launch_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/launch_screen"/>
</RelativeLayout>
-
在
\android\app\src\main\res
创建文件夹drawable,存放图片 -
在
\android\app\src\main\res\values
下创建colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimaryDark">#FFFFFF</color>
</resources>
\android\app\src\main\res\values\styles.xml
中新增主题
<style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>
android\app\src\main\java\com\rnlistebook\MainActivity.java
package com.rnlistebook;
import com.facebook.react.ReactActivity;
import android.os.bundle;
import org.devio.rn.splashscreen.SplashScreen;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "RNListeBook";
}
// 重写onCreate方法,整个RN项目加载的入口
@Override
protected void onCreate(Bundle savedInstanceState){
SplashScreen.show(this, R.style.SplashScreenTheme);
super.onCreate(savedInstanceState);
}
}
- 隐藏图片
src\navigator\index.tsx
import Splash from 'react-native-splash-screen';
...
useEffect(() => {
Splash.hide();
}, []);
android\build.gradle
defaultConfig {
...
multiDexEnabled true
}
dependencies {
...
implementation 'anroidx.multidex:multidex:2.0.1'
}
\android\app\src\main\java\com\rnlistebook\MainApplication.java
import androidx.multidex.MultiDexApplication;
public class MainApplication extends MultiDexApplication implements ReactApplication {
.env
APP_NAME=听书
VERSIONCODE=1
VERSIONNAME=1.0.0
android\app\build.gradle
defaultConfig {
versionCode project.env.get("VERSIONCODE").toInteger()
versionName project.env.get("VERSIONNAME")
}
android\app\src\main\res\values\strings.xml
<resources>
<string name="app_name">@string/APP_NAME</string>
</resources>
- 根目录新建
.env.production
修改 APP_URL 为生产环境地址(android 9.0 以上禁止使用http协议)
解决方法
android\app\src\main\res\xml\network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true" />
</network-security-config>
\android\app\src\main\AndroidManifest.xml
android:networkSecurityConfig="@xml/network_security_config"
重置console函数
index.js
if (__DEV__) {
const emptyFunc = () => {};
global.console.info = emptyFunc;
global.console.log = emptyFunc;
global.console.warn = emptyFunc;
global.console.error = emptyFunc;
}
替换android\app\src\main\res
下mipmap的图片