如何更新另一个选项卡的状态

Question

我在TabBarIOS旁边有两个标签.

第一个选项卡是提供功能,用于将新项目添加到AsyncStorage中

第二个选项卡显示AsyncStorage中的所有项目

但是当我运行我的应用程序时,在第一个选项卡中添加一个新项目后,导航到第二个选项卡我看不到页面重新渲染,我需要做一个Command + R然后我看到我的新数据.

解决此问题的一种方法是在shouldComponentUpdate中读取asyncStorage,但请注意,反应会不断调用shouldComponentUpdate.虽然我想只强制按需更新UI.

因此,在本机反应中,更新另一个UI组件状态的正确方法是什么？

示例应用:https: //drive.google.com/file/d/0B8kAIsj2xDnUMklIQmc0b3NiSVE/view?usp=sharing

Answer 1

这就是我要说的。完成后，您可能会想要对此进行一些重构，但总的来说，我认为这最终会是这样的。关于正确使用生命周期函数，我还有很多东西需要学习，而且我不确定您现在是否需要它们。

应用容器.js

我基本上已经删除了你的 NavigatorIOS。我认为那些都是错误的。相反，我用组件替换它们，将数据作为道具传递，包括按下按钮的回调函数。我已将 addData 函数提升了一个级别。

class AppContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'data-list',
            dataLen: 0
        }

        AsyncStorage.getItem("all-data")
            .then((data)=>{
                if(!data)
                {
                    data = "[]";
                }

                var dataObj = JSON.parse(data);
                this.setState({
                    dataLen : dataObj.length
                });
            });

        this.addData.bind(this);
    }

    addData() {
        AsyncStorage.getItem("all-data")
            .then((data)=>{
                if(!data)
                {
                    data = "[]";
                }

                var dataObj = JSON.parse(data);
                dataObj.push({
                    val: Date.now()
                });

                AsyncStorage.setItem("all-data", JSON.stringify(dataObj));
                this.setState({
                    dataLen: dataObj.length
                });
            });
    }

    render() {
        return (
        <TabBarIOS style={styles.container}>
            <TabBarIOS.Item
                title="Add Data"
                selected={this.state.selectedTab == 'add-data'}
                onPress={()=> this.setState({selectedTab: 'add-data'})}
            >
                <AddData onButtonPress={this.addData} dataLen={this.state.dataLen} />
            </TabBarIOS.Item>
            <TabBarIOS.Item
                title="Data List"
                selected={this.state.selectedTab == 'data-list'}
                onPress={()=> this.setState({selectedTab: 'data-list'})}
                badge={this.state.dataLen}
            >
                <DataList dataLen={this.state.dataLen} />
            </TabBarIOS.Item>
        </TabBarIOS>
      );
    }
}

添加数据.js

这将显着简化您的子组件......

class AddData extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>{this.props.dataLen}</Text>
                <TouchableHighlight
                    onPress={this.props.onButtonPress}
                    style={styles.button}>
                    <Text style={styles.buttonText}>Plus One</Text>
                </TouchableHighlight>
            </View>
        );
    }


}

数据列表.js

class PlayerList extends Component {
    constructor(props) {
        super(props);

    }


    render() {
        return (
            <View style={styles.container}>
                <Text>{this.props.dataLen}</Text>
            </View>
        );
    }
}