在iOS集成RN 的基础上，具体集成步骤请看这篇文章
在package.json 中添加 react-navigation
{
"name": "MobXTest",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-mobx": "^1.0.3",
"babel-preset-stage-0": "^6.24.1",
"mobx": "^5.1.0",
"mobx-react": "^5.2.5",
"react": "16.4.1",
"react-native": "0.56.0",
"react-navigation":"^2.12.1"
},
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "^5",
"jest": "23.5.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
cd reactnative
yarn install
❌native module cannot be null
修改podfile
platform :ios, '9.0'
use_frameworks!
target 'iOSInstallRN' do
use_frameworks!
pod 'AFNetworking'
pod 'MBProgressHUD'
pod 'React', :path => './reactnative/node_modules/react-native', :subspecs => [
'Core',
'DevSupport',
'RCTText',
'RCTNetwork',
'RCTWebSocket',
'RCTImage',
'RCTGeolocation',
'RCTSettings',
'CxxBridge', # Include if RN >= 0.47
'ART',
'RCTActionSheet',
'RCTGeolocation',
'RCTPushNotification',
'RCTVibration',
'RCTLinkingIOS'
]
pod 'yoga', :path => './reactnative/node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => './reactnative/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'Folly', :podspec => './reactnative/node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'glog', :podspec => './reactnative/node_modules/react-native/third-party-podspecs/glog.podspec'
end
新建router.js
import React from 'react';
import {
createStackNavigator
} from 'react-navigation';
import Home from './home';
import Moment from'./moment';
const StackRouteConfigs = {
Home: {
screen: Home,
navigationOptions: {
header: null
}
},
Moment: {
screen: Moment,
navigationOptions: {
header: null
}
},
};
const StackNavigatorConfigs = {
initialRouteName: 'Home', // 初始化哪个界面为根界面
mode: 'card', // 跳转方式：默认的card，在iOS上是从右到左跳转，在Android上是从下到上，都是使用原生系统的默认跳转方式。
headerMode: 'screen', // 导航条动画效果：float表示会渐变，类似于iOS的原生效果，screen表示没有渐变。none表示隐藏导航条
gesturesEnabled: false,
navigationOptions: {
cardStack: {
gesturesEnabled: false, //是否可以使用手势关闭此屏幕。在iOS上默认为true，在Android上为false
},
},
};
const AppNavigator = createStackNavigator(StackRouteConfigs, StackNavigatorConfigs);
export default AppNavigator;
index.ios.js
/** @format */
import {AppRegistry, StyleSheet, Text, View, TextInput,TouchableOpacity,NativeModules} from 'react-native';
import React, {Component} from 'react';
import AppNavigator from './routers';
import {
addNavigationHelpers,
NavigationActions,
} from 'react-navigation';
const RNBridge = NativeModules.RNBridge;
import {Provider} from 'mobx-react';
import {observable,runInAction,extendObservable} from 'mobx'
class RootStore {
constructor() {
this.userStore = new UserStore(this)
this.todoStore = new TodoStore(this)
// 给 userStore 添加 observable 的属性
extendObservable(this.userStore, {
userName: '尼古拉斯-root',
userAge: '18-root',
userSex: '男-root'
});
// 给 todoStore 添加 observable 的属性
extendObservable(this.todoStore, {
todoList: [
"吃饭",
"睡觉",
"看书"
]
});
}
}
class UserStore {
constructor(rootStore) {
this.rootStore = rootStore
}
// 修改用户名
changeRootUserName(name){
// runInAction 在这里面写 可以修改 observable 修饰的变量
runInAction(()=>{
this.userName += name
})
}
}
class TodoStore {
constructor(rootStore) {
this.rootStore = rootStore
}
// 修改list
changeTodoList(list){
// runInAction 在这里面写 可以修改 observable 修饰的变量
runInAction(()=>{
this.todoList = list
})
}
}
const colors = observable({
foreground: '#000',
background: '#fff'
});
const rootStore = new RootStore();
class Root extends Component {
render() {
return (
<Provider rootStore={rootStore} colors={colors}>
<AppNavigator />
</Provider>
);
}
}
const styles = StyleSheet.create({
screenStyle:{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
AppRegistry.registerComponent('iOSInstallRN', () => Root);
home.js
/** @format */
import {AppRegistry, StyleSheet, Text, View, TextInput,TouchableOpacity} from 'react-native';
import React, {Component} from 'react';
import HomeItem from './item';
import {observable, configure, toJS,runInAction} from 'mobx'
import {action,observer,inject} from 'mobx-react'
// 本页数据源
const myStore = observable({
userName: "尼古拉斯",
userAge: 18,
userSex: 0, // 0 男 1 女
/**
* 修改年龄
* age 要修改的年龄
*/
changeUserAge(age) {
runInAction(()=>{
this.userAge = age;
})
},
/**
* 修改姓名
* age 要修改的年龄
*/
changeUserName(name) {
runInAction(()=>{
this.userName = name
})
}
})
const home = inject("rootStore","colors")(observer(class home extends Component {
componentDidMount(){
console.log('myStore: ', toJS(myStore));
console.log('this.props.rootStore: ', toJS(this.props.rootStore));
console.log('this.props.colors: ', toJS(this.props.colors));
}
render() {
return (
<View style={styles.container}>
<View>
<View style={{flexDirection: "row", marginTop: 100}}>
<Text style={{width: 100}}>你的名字:</Text>
<TextInput value={String(myStore.userName)} onChangeText={(value)=>{
// 调用方法直接修改姓名
myStore.changeUserName(value);
}}/>
</View>
<View style={{flexDirection: "row", marginTop: 20}}>
<Text style={{width: 100}}>你的年龄:</Text>
<TextInput value={String(myStore.userAge)} onChangeText={(value)=>{
// 调用方法直接修改年龄
myStore.changeUserAge(value);
}}/>
</View>
<View style={{flexDirection: "row", marginTop: 20}}>
<Text style={{width: 100}}>你的性别:</Text>
<Text style={{color: 'red', fontSize: 20}}>{myStore.userSex ? '女' : '男'}</Text>
</View>
</View>
<TouchableOpacity onPress={()=>{
this.props.navigation.push('Moment')
}}>
<Text>点击进入push到另外一个RN界面</Text>
</TouchableOpacity>
</View>
);
}
}))
const styles = StyleSheet.create({
screenStyle:{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
export default home;
输出
image.png
项目地址
https://github.com/chjwrr/iOSInstallReactNative
cd reactnative
yarn install
