Iam目前使用react native和mobx构建一个应用程序。我的问题是,在更改商店的可观察值后,不会重新呈现组件。我的代码如下:
组件/ phoneNumberChange.js:
@inject('store')
@observer export class PhoneNumberChange extends React.Component{
renderPhoneInput = () => (
<React.Fragment>
<Button onPress={() => this.props.store.showCountryPicker()}>
<Text>Show picker</Text>
</Button>
</React.Fragment>
);
render = () => (
<React.Fragment>
<CountryCodePicker visible= {this.props.store.pickerVisible}/>
</React.Fragment>
);
}
屏幕/ loginScreen.js:
import { Provider } from "mobx-react";
import { store } from "stores/phoneNumberChangeStore.js";
import { PhoneNumberChange } from "components/phoneNumberChange.js";
export class LoginScreen extends React.Component{
render = () => (
<Provider store={store}>
<PhoneNumberChange/>
</Provider
);
}
商店/ phoneNumberChangeStore.js:
import { observable, action } from "mobx";
class PhoneNumberChangeStore {
@observable pickerVisible;
constructor(){
this.hideCountryPicker();
}
@action hideCountryPicker = () => {
this.pickerVisible = false;
}
@action showCountryPicker = () => {
this.pickerVisible = true;
}
}
export const store = new PhoneNumberChangeStore();
babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
};
};
的package.json:
{
"name": "myapp",
"main": "app/app.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"@babel/plugin-proposal-decorators": "^7.3.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-react-native": "^4.0.1",
"expo": "^32.0.0",
"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"prop-types": "^15.7.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-animatable": "^1.3.1",
"react-native-ui-kitten": "^3.1.2",
"react-navigation": "^3.3.2"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
当可见道具发生变化时,countryCodePicker是否显示。这很有效。但是当我从商店更改一个值时,它不会更新并显示出来。我将不胜感激任何帮助!
干杯
您在default
中将商店单件导出为phoneNumberChangeStore.js
,但是您要在PhoneNumberChangeStore
中导入命名导出loginScreen.js
。
请改用default
中的loginScreen.js
导出。商店物业也被称为pickerVisible
,而不是countryCodePickerVisible
。
找到了解决方案!我重新定义了实例上的渲染。
我把render = () => {..}
换成了render(){ return (...); }
干杯!