MobX在React Native中观察不到刷新

Question

我正在尝试在反应本机视图中热刷新可观察的数据。初始值显示得很完美，但是当我从商店调用一个动作来更改它时，它不会刷新。但是，只是没有在屏幕上调用它进行更新（正在更改）（我可以在另一个视图中看到更改）。有任何想法吗？我正在使用React Navigation。不知道这是否会造成干扰。

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

遇到此问题的任何人...我忘记正确装饰... durrrrr

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