qiita.com この辺参考
これらいれた。
yarn add babel-plugin-transform-decorators-legacy yarn add mobx-react yarn add mobx
.babelrc
には追加。
{ "presets": ["babel-preset-expo"], + "plugins": ["transform-decorators-legacy"], "env": { "development": {
こんな風にRootStack
の上にもできた
import * as React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { Provider } from 'mobx-react'; import { createStackNavigator } from 'react-navigation'; import { GameScreen } from './Game'; import { DetailScreen } from './Detail'; import MyNumberStore from './stores/MyNumberStore'; const myNumberStore = new MyNumberStore(); const stores = { myNumber: myNumberStore, }; class HomeScreen extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.title}>OikuraPp!</Text> <Text>Make a good guess Number !</Text> <Button title="Start" onPress={() => this.props.navigation.navigate('Game')} /> <Button title="Settings" onPress={() => this.props.navigation.navigate('Details')} /> <Text style={styles.copyright}>(c)shinriyo</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, title: { fontSize: 90, }, copyright: { fontSize: 12, position: 'absolute', bottom: 50 }, }); const RootStack = createStackNavigator( { Home: HomeScreen, Game: GameScreen, Details: DetailScreen, }, { initialRouteName: 'Home', } ); export default class App extends React.Component { render() { // return <RootStack />; return ( <Provider {...stores}> <RootStack /> </Provider> ); } }
const stores = { myNumber: myNumberStore, };
ここで設定したものが、他の場所のインジェクトしたとこで@inject('myNumber')
で使える
@inject('myNumber') @observer export class GameScreen extends React.Component<{}> { answers: string[] = []; myNumber: string = '';