現(xiàn)在越來越多的公司使用ReactNative（RN）技術(shù)，趨勢(shì)還是顯而易見的，作為Android開發(fā)的我，下面記錄下嘗試著Android與RN的一次接觸吧~

創(chuàng)建RN工程

Getting Started

按照官方文檔一步一步操作，很簡(jiǎn)單，就不重復(fù)這塊了。

已有Android工程 + 植入RN頁面

對(duì)于市面上大部分App來說，很多都是完整的原生工程，那么想嘗試RN技術(shù)，直接的方式就是在某個(gè)頁面（Activity or Fragment）里使用RN頁面。

準(zhǔn)備

• 參照 Getting Started 配置環(huán)境
• 最好是按照 Getting Started 走一遍HelloWord

環(huán)境就緒后，那么，開始。

Activity

• Android端

1. gradle里增加dependencies compile "com.facebook.react:react-native:+"

• 創(chuàng)建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;
       }
   }
  

• 調(diào)用處
  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的第一個(gè)參數(shù)必須是一樣的
2. Android 需要手動(dòng)開啟懸浮窗權(quán)限
3. 在package.json目錄，執(zhí)行 ** 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. 新建業(yè)務(wù)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);
  

以上僅僅是實(shí)現(xiàn)了原生工程植入ReactNative頁面，從Native->RN的跳轉(zhuǎn)，后續(xù)會(huì)記錄原生組件==，先到這里。