现在越来越多的公司使用ReactNative（RN）技术，趋势还是显而易见的，作为Android开发的我，下面记录下尝试着Android与RN的一次接触吧~
创建RN工程
按照官方文档一步一步操作，很简单，就不重复这块了。
已有Android工程 + 植入RN页面
对于市面上大部分App来说，很多都是完整的原生工程，那么想尝试RN技术，直接的方式就是在某个页面（Activity or Fragment）里使用RN页面。
准备
- 参照 Getting Started 配置环境
- 最好是按照 Getting Started 走一遍HelloWord
环境就绪后，那么，开始。
Activity
- Android端
- gradle里增加dependencies
compile "com.facebook.react:react-native:+"
-
创建Activity
public class RnTestActivity extends ReactActivity {@Override protected String getMainComponentName() { return "ZmyNative"; } @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } } -
修改Application
public class BaseApplication extends Application implements ReactApplication {private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } } 调用处
startActivity(new Intent(MainActivity.this, RnTestActivity.class));修改 AndroidManifest.xml
AndroidManifest.xml
- JS端
- 新建package.json
{
"name": "ZmyNative",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.3.1",
"react-native": "0.32.1"
}
}
- 新建index.android.js （主要代码）
export class ZmyNative extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
ssss
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Switch value={true}></Switch>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
AppRegistry.registerComponent('ZmyNative', () => ZmyNative);
- 其他
- 注意 Android端getMainComponentName 的返回值 与 JS端 registerComponent的第一个参数必须是一样的
- Android 需要手动开启悬浮窗权限
- 在package.json目录，执行 ** npm start**
-
配置本地地址
debug.png
Fragment
- Android端
-
新建ReactFragment
public abstract class ReactFragment extends Fragment {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
public abstract String getMainComponentName();@Override public void onAttach(Context context) { super.onAttach(context); mReactRootView = new ReactRootView(context); mReactInstanceManager = ((MainApplication)getActivity().getApplication()).getReactNativeHost().getReactInstanceManager(); } @Nullable @Override public ReactRootView onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); return mReactRootView; } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); mReactRootView.startReactApplication(mReactInstanceManager, getMainComponentName(), null); } } -
新建业务Fragment （HelloFragment）
public class HelloFragment extends ReactFragment { @Override public String getMainComponentName() { return "hello"; } } -
引用Fragment的Activity
public class RnMainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {private ReactInstanceManager mReactInstanceManager; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_rn_main); mReactInstanceManager = ((MainApplication) getApplication()).getReactNativeHost().getReactInstanceManager(); Fragment viewFragment = new HelloFragment(); getSupportFragmentManager().beginTransaction().add(R.id.rn_frame_layout, viewFragment).commit(); } @Override protected void onPause() { super.onPause(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostPause(); } } @Override protected void onResume() { super.onResume(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostResume(this, this); } } @Override protected void onDestroy() { super.onDestroy(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostDestroy(); } } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } }
-
JS端
export class hello extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native 哈哈! </Text> </View> ); } } AppRegistry.registerComponent('hello', () => hello);
以上仅仅是实现了原生工程植入ReactNative页面，从Native->RN的跳转，后续会记录原生组件==，先到这里。
