let index &＃61; 0

class ObservableListStore {
&＃64;observable list &＃61; []

addListItem (item) {
this.list.push({
name: item,
items: [],
index
})
index&＃43;&＃43;
}

removeListItem (item) {
this.list &＃61; this.list.filter((l) &＃61;> {
return l.index !&＃61;&＃61; item.index
})
}

addItem(item, name) {
this.list.forEach((l) &＃61;> {
if (l.index &＃61;&＃61;&＃61; item.index) {
l.items.push(name)
}
})
}
}

const observableListStore &＃61; new ObservableListStore()
export default observableListStore

1. 从 mobx 导入 observable – observable 可以给存在的数据结构如对象、数组和类增加可观察的能力。简单地给类属性增加一个 &＃64;observable 装饰器&＃xff08;下一代 ECMAScript&＃xff09;&＃xff0c;或者调用 observable 或 extendObservable 函数&＃xff08;ES5&＃xff09;&＃xff1b;
2. 创建一个叫做 ObservableListStore 的类&＃xff1b;
3. 创建一个可观察的数组 list&＃xff1b;
4. 创建三个操作列表数组的方法&＃xff1b;
5. 创建一个 ObservableListStore 的实例 observableListStore&＃xff1b;
6. 导出 observableListStore

现在已经用了存储器&＃xff0c;我们修改项目的入口文件&＃xff0c;使用存储&＃xff0c;创建导航。如果你开发是 Android 项目&＃xff0c;入口文件是 index.Android.js&＃xff0c;如果是 iOS 项目&＃xff0c;则是 index.iOS.js。

import React, { Component } from &＃39;react&＃39;
import App from &＃39;./app/App&＃39;
import ListStore from &＃39;./app/mobx/listStore&＃39;

import {
AppRegistry,
Navigator
} from ‘react-native’

class ReactNativeMobX extends Component {
renderScene (route, navigator) {
return
}
configureScene (route, routeStack) {
if (route.type &＃61;&＃61;&＃61; ‘Modal’) {
return Navigator.SceneConfigs.FloatFromBottom
}
return Navigator.SceneConfigs.PushFromRight
}
render () {
return (
configureScene&＃61;{this.configureScene.bind(this)}
renderScene&＃61;{this.renderScene.bind(this)}
initialRoute&＃61;{{
component: App,
passProps: {
store: ListStore
}
}} />
)
}
}

AppRegistry.registerComponent(‘ReactNativeMobX’, () &＃61;> ReactNativeMobX)

在入口文件中我们创建了一个基本的导航状态&＃xff0c;并导入了新创建的数组存储器。在 initialRoute 中我们传入数据存储作为属性。我们还把已经创建的组件 App 作为初始路由。App 将会访问属性中的数据存储。

在 configureScene 中&＃xff0c;我们检查类型&＃xff08;type&＃xff09;是否是 ‘Modal’&＃xff0c;是则返回 floatFromBottom 这个场景配置项&＃xff0c;可以把下一个场景也设置为模态的。

现在&＃xff0c;我们来创建应用组件。这确是一个大型的组件&＃xff0c;还有很多需要完善的地方&＃xff0c;但我们创建了一个允许增加和删除列表条目的基本用户界面。调用数据存储的方法来和我们的应用状态交互。app/App.js 的内容&＃xff1a;

import React, { Component } from &＃39;react&＃39;
import { View, Text, TextInput, TouchableHighlight, StyleSheet } from &＃39;react-native&＃39;
import {observer} from &＃39;mobx-react/native&＃39;
import NewItem from &＃39;./NewItem&＃39;

&＃64;observer
class TodoList extends Component {
constructor () {
super()
this.state &＃61; {
text: ‘’,
showInput: false
}
}
toggleInput () {
this.setState({ showInput: !this.state.showInput })
}
addListItem () {
this.props.store.addListItem(this.state.text)
this.setState({
text: ‘’,
showInput: !this.state.showInput
})
}
removeListItem (item) {
this.props.store.removeListItem(item)
}
updateText (text) {
this.setState({text})
}
addItemToList (item) {
this.props.navigator.push({
component: NewItem,
type: ‘Modal’,
passProps: {
item,
store: this.props.store
}
})
}
render() {
const { showInput } &＃61; this.state
const { list } &＃61; this.props.store
return (


My List App

{!list.length ? : null}

{list.map((l, i) &＃61;> {
return
style&＃61;{styles.item}
onPress&＃61;{this.addItemToList.bind(this, l)}>{l.name.toUpperCase()}
style&＃61;{styles.deleteItem}
onPress&＃61;{this.removeListItem.bind(this, l)}>Remove

})}

underlayColor&＃61;‘transparent’
onPress&＃61;{
this.state.text &＃61;&＃61;&＃61; ‘’ ? this.toggleInput.bind(this)
: this.addListItem.bind(this, this.state.text)
}
style&＃61;{styles.button}>

{this.state.text &＃61;&＃61;&＃61; ‘’ && ‘&＃43; New List’}
{this.state.text !&＃61;&＃61; ‘’ && ‘&＃43; Add New List Item’}


{showInput && style&＃61;{styles.input}
onChangeText&＃61;{(text) &＃61;> this.updateText(text)} />}

);
}
}

const NoList &＃61; () &＃61;> (

No List, Add List To Get Started

)

const styles &＃61; StyleSheet.create({
itemContainer: {
borderBottomWidth: 1,
borderBottomColor: ‘#ededed’,
flexDirection: ‘row’
},
item: {
color: ‘#156e9a’,
fontSize: 18,
flex: 3,
padding: 20
},
deleteItem: {
flex: 1,
padding: 20,
color: ‘#a3a3a3’,
fontWeight: ‘bold’,
marginTop: 3
},
button: {
height: 70,
justifyContent: ‘center’,
alignItems: ‘center’,
borderTopWidth: 1,
borderTopColor: ‘#156e9a’
},
buttonText: {
color: ‘#156e9a’,
fontWeight: ‘bold’
},
heading: {
height: 80,
justifyContent: ‘center’,
alignItems: ‘center’,
borderBottomWidth: 1,
borderBottomColor: ‘#156e9a’
},
headingText: {
color: ‘#156e9a’,
fontWeight: ‘bold’
},
input: {
height: 70,
backgroundColor: ‘#f2f2f2’,
padding: 20,
color: ‘#156e9a’
},
noList: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
noListText: {
fontSize: 22,
color: ‘#156e9a’
},
})

export default TodoList

我来解释此文件中可能不明确的地方。如果你有什么还不明白的&＃xff0c;请留言&＃xff0c;我会更新和回复。

1. 从 mobx-react/native 导入 observer&＃xff1b;
2. 使用 &＃64;observer 装饰器描述类&＃xff0c;确保相关数组变化后组件独立地重渲染&＃xff1b;
3. 导入已经创建好的组件 NewItem。这是我们要增加新条目时转向的组件&＃xff1b;
4. 在 addListItem中&＃xff0c;把 this.state.text 传入 this.props.store.addListItem。在与输入框绑定的 updateText 中会更新 this.state.text&＃xff1b;
5. 在 removeListItem 中调用 this.props.store.removeListItem 并传入条目&＃xff1b;
6. 在 addItemToList 中调用 this.props.navigator.push&＃xff0c;传入条目和数组存储两个参数&＃xff1b;
7. 在 render 方法中&＃xff0c;通过属性解构数据存储&＃xff1a;

   const { list } &＃61; this.props.store
   

8. 在 render 方法中&＃xff0c;也创建了界面&＃xff0c;并绑定了类的方法

最后&＃xff0c;创建 NewItem 组件&＃xff1a;

import React, { Component } from &＃39;react&＃39;
import { View, Text, StyleSheet, TextInput, TouchableHighlight } from &＃39;react-native&＃39;

class NewItem extends Component {
constructor (props) {
super(props)
this.state &＃61; {
newItem: ‘’
}
}
addItem () {
if (this.state.newItem &＃61;&＃61;&＃61; ‘’) return
this.props.store.addItem(this.props.item, this.state.newItem)
this.setState({
newItem: ‘’
})
}
updateNewItem (text) {
this.setState({
newItem: text
})
}
render () {
const { item } &＃61; this.props
return (


{item.name}
onPress&＃61;{this.props.navigator.pop}
style&＃61;{styles.closeButton}>×

{!item.items.length && }
{item.items.length ? : }

value&＃61;{this.state.newItem}
onChangeText&＃61;{(text) &＃61;> this.updateNewItem(text)}
style&＃61;{styles.input} />
onPress&＃61;{this.addItem.bind(this)}
style&＃61;{styles.button}>
Add



)
}
}

const NoItems &＃61; () &＃61;> (

No Items, Add Items To Get Started

)
const Items &＃61; ({items}) &＃61;> (

{items.map((item, i) &＃61;> {
return • {item}
})
}

)

const styles &＃61; StyleSheet.create({
heading: {
height: 80,
justifyContent: ‘center’,
alignItems: ‘center’,
borderBottomWidth: 1,
borderBottomColor: ‘#156e9a’
},
headingText: {
color: ‘#156e9a’,
fontWeight: ‘bold’
},
input: {
height: 70,
backgroundColor: ‘#ededed’,
padding: 20,
flex: 1
},
button: {
width: 70,
height: 70,
justifyContent: ‘center’,
alignItems: ‘center’,
borderTopWidth: 1,
borderColor: ‘#ededed’
},
closeButton: {
position: ‘absolute’,
right: 17,
top: 18,
fontSize: 36
},
noItem: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
noItemText: {
fontSize: 22,
color: ‘#156e9a’
},
item: {
color: ‘#156e9a’,
padding: 10,
fontSize: 20,
paddingLeft: 20
}
})

export default NewItem

如果你对 React 或 React Native 熟悉&＃xff0c;上面就没什么特别的。基本上就是访问条目的属性&＃xff0c;遍历条目的数组&＃xff0c;判断是否以及存在。存在则显示一条消息。

组件中我们与数据存储的唯一一处位置就是 addItem&＃xff0c;向 this.props.store.addItem 传入了 this.props.item 和 this.state.newItem。

就这么多&＃xff01;

查看最终的代码库&＃xff0c;点击这里。