准备
- node安装:https://nodejs.org/en/
- react-native官网:https://facebook.github.io/react-native/
- TypeScript: http://www.typescriptlang.org/docs/home.html
1. Expo尝鲜
1.1 环境安装:
- 1.1.1 npm来安装create-react-native-app命令行
npm install -g create-react-native-app
- 1.1.2 创建一个名为“RNExpo”的新的React Native项目
create-react-native-app RNExpo
cd RNExpo
npm start
然后到iOS和android应用商店下载App“Expo”, 扫描二维码就可以看到效果了。
注:其中ios直接打开相机扫描识别即可
2. Android混合开发
2.1 gradle配置
- 2.1.1 修改主工程build.gradle:
allprojects {
repositories {
maven{ url "$rootDir/node_modules/react-native/android"}
}
}
其中url的路径需要修改为对应的node_modules的的react-native的路径。
- 2.1.2 修改app中的build.gradle:
compile "com.facebook.react:react-native:+" // From node_modules.
这里加上react-native的依赖
2.2 注册ReactNativeHost
- 2.2.1 新建MyReactPackage,包含需要暴露的模块
public class MyReactPackage implements ReactPackage {
public UserInfoModule userInfoModule;
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
userInfoModule = new UserInfoModule(reactContext);
modules.add(userInfoModule);
return modules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
这里主要是为了实现js与原生的交互。可以增加更多的module。
- 2.2.2 创建一个ReactContextBaseJavaModule
这里暴露用户的一些数据定义为UserInfoModule
public class UserInfoModule extends ReactContextBaseJavaModule {
public UserInfoModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "UserInfo";
}
@ReactMethod
public void rnCallNativeFromPromise(String msg, Promise promise) {
Log.e("---", "adasdasda");
// 1.处理业务逻辑...
String result = "处理结果:" + msg;
// 2.回调RN,即将处理结果返回给RN
promise.resolve(result);
}
}
暴露了rnCallNativeFromPromise方法。需要使用@ReactMethod注解
- 2.2.3 Application实现ReactApplication
public class MyApplication extends Application implements ReactApplication {
private static final MyReactPackage myReactPackage = new MyReactPackage();
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return false;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(new MainReactPackage(), myReactPackage);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
/**
* 获取 reactPackage
* @return
*/
public static MyReactPackage getReactPackage() {
return myReactPackage;
}
}
到此基本上前期环境都已经搭建ok了。
2.3 新建ReactActivity
新建MyReactActivity
public class MyReactActivity extends ReactActivity {
@Nullable
@Override
protected String getMainComponentName() {
return "App";
}
}
这里的getMainComponentName就是js中
AppRegistry.registerComponent('App', () => App);
这样我们就新建了一个Activity,实际加载的js的component就会在这个activity中渲染了。
3. Js开发
基于1中的脚手架create-react-native-app生成的项目,接着开发。
3.1 暴露
npm run eject
不过暴露之后用不了expo了
3.2 支持TypeScript
TypeScript支持更多的语法糖和类型。
- 3.2.1 安装typescript
cd RNExpo
npm install -g typescript
npm install typescript
tsc --init
# 未安装 tsd 则先安装再进行项目初始化
npm install -g tsd
tsd init && tsd install react-native --save
- 3.2.2 配置tsconfig.json
{
"compilerOptions": {
"target": "es6",
// "allowJs": true,
"jsx": "react",
// "outDir": "./dist",
"sourceMap": false,
"noImplicitAny": false,
"skipLibCheck": true
},
"include": [
"typings/**/*.d.ts",
"*.ts",
"*.tsx"
],
"exclude": [
"node_modules"
]
}
- 3.2.3 安装@types/xxx
在使用typescript的第三方开源组件时候,需要安装对应的typescript的组件,如下所示:
npm install @types/react
npm install @types/react-dom
npm install @types/react-native
npm install @types/react-native-swiper
npm install @types/react-navigation
- 3.2.4 编译
tsc
编译成功后会在对应的xxx.tsx下有个xxx.js。因为实际我们还是运行的js代码。
3.3 新建App.tsx
新建Component
import * as React from 'react'
import {StyleSheet, Text, View} from 'react-native';
function hello(): string {
return 'Hello React Native!'
}
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>{hello()}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
在index.js中注册App
import {AppRegistry} from 'react-native';
import HelloRNActivity from "App";
AppRegistry.registerComponent("App", () => App);
3.4 打包
- 3.4.1 安装react-native-cli
npm install -g react-native-cli
- 3.4.2 打包到Android的assets中
这里实现了一个脚本 install.sh,实现如下所示:
#!/bin/sh
ASSETS_PATH="../XXX/RNAndroid/src/main/assets"
RES_PATH="../XXX/RNAndroid/src/main/res/drawable-mdpi"
if [ ! -d "output" ]; then
mkdir -p output/bundle
mkdir -p output/res
fi
react-native bundle --platform android --dev false --entry-file index.js --bundle-output output/bundle/index.android.bundle --assets-dest output/res/
if [ ! -d "$ASSETS_PATH" ]; then
mkdir -p $ASSETS_PATH
fi
if [ ! -d "$RES_PATH" ]; then
mkdir -p $RES_PATH
fi
cp output/bundle/* $ASSETS_PATH
cp output/res/drawable-mdpi/* $RES_PATH
该脚本会把需要的bundle文件和资源文件拷贝到Android的工程项目中。