MobX observable 在 React Native 中不刷新

Question

我正在尝试在反应原生视图中热刷新可观察数据。初始值显示完美，但当我从商店调用操作来更改它时不会刷新。但是，它正在被更改（我有另一个视图可以看到更改）只是不在调用操作更新的屏幕上。有任何想法吗？我正在使用反应导航。不确定这是否会造成干扰。

Store.js

import { observable, action, decorate, computed } from 'mobx'

class BooksStore {

    bookColor = 'green'

    testAction = () => {
        console.log('change store value')
        this.bookColor = 'blue'
    }

}

decorate(BooksStore, {
    loading: observable,
    testAction: action,
});

export default new BooksStore();

App.js

import React from 'react';
import Routes from './Routes';

import { Provider } from 'mobx-react';
import BooksStore from './src/Stores/BooksStore';

export default function App() {
  return (

    <Provider booksStore={BooksStore}>
      <Routes /> //react-navigation stacks
    </Provider>

  );
}

RN 视图：

import React, { Component } from 'react';
import { Image, View, Button, Alert, ScrollView, Dimensions, StyleSheet, Text } from 'react-native';
import { inject, observer, Observer} from 'mobx-react'

class MobX1 extends Component {


    render() {

        console.log(this.props.booksStore.bookColor)

        return (

            <View style={styles.container}>

                //this displays initial store val but no refresh when I call testAction()
                <Observer>{() => 
                    <Text style={{ marginBottom: 48 }}>{this.props.booksStore.bookColor}</Text>
                }</Observer>

                <Button
                    title="Change to Blue"
                    onPress={() => this.props.booksStore.testAction()} />

            </View>

        );
    }
}


export default inject('booksStore')(observer(MobX1));

//------------------------------ styles -------------------------------//

const styles = StyleSheet.create({

    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },

});

感谢您的帮助

Answer 1

遇到这个的人...我忘了好好装饰... durrrr

decorate(BooksStore, {
    bookColor: observable, <<<<<<<<<<<<<
    testAction: action,
});