Android&ReactNative的一次亲密接触

现在越来越多的公司使用ReactNative（RN）技术，趋势还是显而易见的，作为Android开发的我，下面记录下尝试着Android与RN的一次接触吧~

创建RN工程

Getting Started

按照官方文档一步一步操作，很简单，就不重复这块了。

已有Android工程 + 植入RN页面

对于市面上大部分App来说，很多都是完整的原生工程，那么想尝试RN技术，直接的方式就是在某个页面（Activity or Fragment）里使用RN页面。

准备

• 参照 Getting Started 配置环境
• 最好是按照 Getting Started 走一遍HelloWord

环境就绪后，那么，开始。

Activity

• Android端

1. 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端

1. 新建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);

• 其他

1. 注意 Android端getMainComponentName 的返回值 与 JS端 registerComponent的第一个参数必须是一样的
2. Android 需要手动开启悬浮窗权限
3. 在package.json目录，执行 ** npm start**

4. 配置本地地址

   
   debug.png

Fragment

• Android端

1. 新建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);
       }
    }
   

2. 新建业务Fragment （HelloFragment）

    public class HelloFragment extends ReactFragment {
       @Override
       public String getMainComponentName() {
           return "hello";
       }
    }
   

3. 引用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的跳转，后续会记录原生组件==，先到这里。