React native 反应本机-组件更新父级

我正在用react native制作一个应用程序，我遇到了一个小问题。 我完成了第一个布局，现在我想用第二个布局更改整个应用程序的样式 这就是我的父母。 正如您所看到的，我使用AsyncStorage检查您何时再次打开应用程序以及上次选择的布局。一切都很好

export default class Home extends React.Component
{
    constructor(props){
        super(props);
        this.state = {
            view:0
        }
    }
    componentWillMount()
    {
        this.checkStructureView();
    }
    checkStructureView = async() =>
    {
        const StructureView = await 
        AsyncStorage.getItem('@StructureView');
        if(StructureView == 1)
        {
            this.setState({
                view:1
            })
        }
        else
        {
            this.setState({
                view:0
            })
        }
    }
    render() 
    {
        if(this.state.view == 1)
        {
            return(
             <ChangeView/>
             ...
             )
        }
        else
        {
          return(
             <ChangeView/>
             ...
             )
        }
    }
}

这是我的组件变更视图。这有点凌乱，因为我有每个按钮的活动/非活动样式。这也可以很好地工作，但问题是，当我点击按钮更改布局时，只有在我刷新应用程序后才会更改布局。 首先，我在父级中添加了这个组件，在更新状态后，布局立即发生了变化，但是我有更多的页面需要添加这个组件，这就是为什么我要使用一个组件。 因此，我的问题是，我如何能够立即更新父状态，以便在每次单击组件按钮时，我的布局都会更改，而不必重新加载应用程序

import React, { Component } from 'react'
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    AsyncStorage
} from 'react-native'

export default class ChangeView extends Component {
    constructor(props){
        super(props);
        this.state = {
            position: this.props.position,
            view:0,
            view1:require(`../assets/icons/view1_inactive.png`),
            view2:require(`../assets/icons/view2_active.png`)
        }
    }

    componentDidMount()
    {
        this.checkViewStructure();
    }
    checkViewStructure = async()=>
    {
        const StructureView = await AsyncStorage.getItem('@StructureView');
        if(StructureView == '0')
        {
            this.setState({
                view1:require(`../assets/icons/view1_inactive.png`),
                view2:require(`../assets/icons/view2_active.png`)
            })
        }
        else
        {
            this.setState({
                view1:require(`../assets/icons/view1_active.png`),
                view2:require(`../assets/icons/view2_inactive.png`)
            })         
        }
    }
    changeToList = async() =>
    {
        const StructureView = await AsyncStorage.getItem('@StructureView');
        if(StructureView == '0')
        {
            await AsyncStorage
            .setItem('@StructureView', '1')
            .then( () => {
                //
            })
            .catch( () => {
                alert('Something happened! Please try again later.');
            });
            this.setState({
                view1:require(`../assets/icons/view1_active.png`),
                view2:require(`../assets/icons/view2_inactive.png`)
            })
        }
    }
    changeToPics = async() =>
    {
        const StructureView = await AsyncStorage.getItem('@StructureView');
        if(StructureView == '1')
        {
            await AsyncStorage
            .setItem('@StructureView', '0')
            .then( () => {
                //
            })
            .catch( () => {
                alert('Something happened! Please try again later.');
            });     
            this.setState({
                view1:require(`../assets/icons/view1_inactive.png`),
                view2:require(`../assets/icons/view2_active.png`)
            })
        }
    }
    render()
    {

        if(this.state.position === 0) 
        return(
            <View style={{alignItems:'flex-end',marginTop:20,marginBottom:10,justifyContent:'flex-end',flexDirection:'row'}}>
                <View>
                    <TouchableOpacity
                    onPress= {() => this.changeToList()}
                    >
                    <Image
                    source={this.state.view1}
                    style={{width:15,height:21,margin:5}}
                    />
                    </TouchableOpacity>
                </View>
                <View>
                    <TouchableOpacity
                    onPress= {() => this.changeToPics()}
                    >
                    <Image
                    source={this.state.view2}
                    style={{width:15,height:21,margin:5}}
                    />
                    </TouchableOpacity>
                </View>
            </View>
        )
        else
        return null
    }
}

ChangeView组件仅更改该特定组件中的状态。有几种方法可以将更改传播到父组件。一种方法是为ChangeView组件实现onChange道具。然后，主组件渲染函数将如下所示：

render() {
  if(this.state.view == 1) {
    return(
      <ChangeView onChange={ (view) => this.setState({ view }) } />
      ...
    )
  } else {
    return(
      <ChangeView onChange={ (view) => this.setState({ view }) } />
      ...
    )
  }
}

您可以在此处阅读有关道具的更多信息：

---

如果您的应用程序有状态处理程序，例如Redux，那么还有其他方法可以做到这一点。

谢谢您的时间。还是不行。只有在我刷新应用程序后，家长身上才发生任何事情。在我的组件内，状态已更改，但在我的父编号@paulv上，您是否在ChangeView组件中调用了this.props.onChangeview？你需要打电话让它工作。请分享您的更新代码，以便我可以查看并帮助您。啊，谢谢。我刚刚开始，我错过了组件道具。现在它工作得很好。多谢各位@paulv如果发生这种情况，我建议您阅读有关道具和道具类型的文档。您将经常使用它。我建议您使用状态管理器来处理应用程序中的状态更改。我通常使用Redux。这将使您的生活更轻松，您不必一直在组件之间传递道具。