Question

我正在用本机生成一个应用程序，但遇到了一个小问题。我完成了第一个布局，现在我想用第二个布局更改整个应用程序的样式这就是我父母的一切。如您所见，我使用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/>
             ...
             )
        }
    }
}

这是我的组件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
    }
}

Answer 1

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

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

您可以在此处了解有关道具的更多信息：https://reactjs.org/docs/typechecking-with-proptypes.html

如果您具有应用程序的状态处理程序（例如Redux），还有其他方法可以实现。

React Native-组件更新父级

1 个答案: