小编use*_*627的帖子

我遇到一个问题,我在多个组件中基于AsyncStorage中的相同键设置了State.由于状态是在componentDidMount中设置的,并且这些组件不一定在导航时卸载和装载,因此状态值和AsyncStorage值可能不同步.

这是我能做的最简单的例子.

组件A.

一个只是设置导航和应用程序.

var React = require('react-native');
var B = require('./B');

var {
    AppRegistry,
    Navigator
} = React;

var A = React.createClass({
    render() {
        return (
            <Navigator
                initialRoute={{
                    component: B
                }}
                renderScene={(route, navigator) => {
                    return <route.component navigator={navigator} />;
                }} />
        );
    }
});

AppRegistry.registerComponent('A', () => A);

组件B.

B在mount上从AsyncStorage读取,然后设置为state.

var React = require('react-native');
var C = require('./C');

var {
    AsyncStorage,
    View,
    Text,
    TouchableHighlight
} = React;

var B = React.createClass({
    componentDidMount() {
        AsyncStorage.getItem('some-identifier').then(value => {
            this.setState({
                isPresent: value …

我有以下情况.我有一个父组件,其中包含一个项目列表,其中任何项目都可以在子组件中向下钻取和查看.从子组件中,您应该能够更改正在查看的项目中的值.

在React网络世界中,这将很容易解决,父级将列表存储为状态,并将项目和回调作为道具传递给子项.

使用React Native,似乎丢失了这种可能性,因为从子组件引起的更改在导航之前不会触发重新呈现.

我录制了一个视频,看起来像这样.https://gfycat.com/GreenAgitatedChanticleer

代码如下.

index.ios.js

var React = require('react-native');
var {
    AppRegistry,
    Navigator
} = React;

var List = require('./list');

var listviewtest = React.createClass({
    render: function() {
        return (
            <Navigator
                initialRoute={{ component: List }}
                renderScene={(route, navigator) => {
                    return <route.component navigator={navigator} {...route.passProps} />;
                }} />

        );
    }
});

AppRegistry.registerComponent('listviewtest', () => listviewtest);

list.js

var React = require('react-native');
var _ = require('lodash');
var {
    View,
    Text,
    TouchableHighlight,
    ListView
} = React;

var Detail = require('./detail');

var List = …