我目前正在使用 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
);
}
stores/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
}
当visible属性改变时,countryCodePicker是否显示。这是有效的。但是当我从商店更改值时,它不会更新并显示。我将不胜感激任何帮助!
干杯
最佳答案
您正在 phoneNumberChangeStore.js
中将商店单例导出为 default
,但您正在 loginScreen 中导入命名导出
.PhoneNumberChangeStore
.js
改用 loginScreen.js
中的default
导出。商店属性也称为 pickerVisible
,而不是 countryCodePickerVisible
。
关于reactjs - React Native + mobx 不重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55225384/