react_demo 基本組件搭建，框架 
先執行命令安裝插件 npm install
運行命令 react-native run-android 運行項目
運行環境：android模擬器（真機）[運行環境]+webStorm（編寫工具）+node.js(虛擬機服務器)
1.繼承ReactContextBaseJavaModule
@ReactMethod 註解,reactNative調用原生的方法
2.繼承ReactPackage
.
3.MainApplication繼承Application實現RactApplicaiotn接口
4.調用傳參，回調到原生界面
var nativeModule=NativeModules.OpenNativeModule;
nativeModule.openNativeVc("string")//調用@ReactMethod 註解的方法
5.繼承PureComponent定義BaseComponent 基類（封裝navigationOptions,兼容iphoneX，==後續可以自己擴展）
由於reactNative是基於組件化的
export default class BaseComponent extends PureComponent {
/**
* todo 傳遞方法{pageTitle:'titleText',
* isShowRightMenu:false,
* customRightMenuView:<View/>
* key:value},
* */
static navigationOptions = (params) => {
let pageTitle = (params.navigation.state.params && params.navigation.state.params.pageTitle) ? params.navigation.state.params.pageTitle : '未知名';
let isShowRightMenu = (params.navigation.state.params && params.navigation.state.params.isShowRightMenu) ? params.navigation.state.params.isShowRightMenu : null;
let customRightMenuView = (params.navigation.state.params && params.navigation.state.params.customRightMenuView) ? params.navigation.state.params.customRightMenuView : null
return NavigationOptionsHelper.navigationOptions(pageTitle,
isShowRightMenu ?
<TouchableOpacity
activeOpacity={0.8}
onPress={() => {
CallOnceInInterval.onPress(() => {
params.navigation.state.params.navigatePress()
})
}}>
{customRightMenuView}
</TouchableOpacity> : <View/>)
}
/**
* 網絡請求
*/
initData() {
};
/*** 點擊右邊菜單按鈕
*/
onClickRightMenu() {
}
componentDidMount() {
this.props.navigation.setParams({navigatePress: this.onClickRightMenu})
this.initData();
}
componentWillUnmount() {
}
constructor(props) {
super(props);
this.renderComponent = this.renderComponent.bind(this);
this.state = {
//pageLoad
isLoad: true,//是否加載
};
}
/**
* 渲染子組件
*/
renderComponent() {
};
/**
* 渲染狀態欄
*/
renderStatusBar(){
return GlobalUtil.getStatusBar()
}
render() {
return (
<SafeAreaView forceInset={{bottom: 'always', top: 'never'}} style={[styles.container]}>
{this.renderStatusBar()}
{this.renderComponent()}
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fafafa',
},
});