Question

我有一个React Native应用，其中我正在使用react-navigation中的标签导航器。在这里，我正在使用一个函数来更改其他选项卡导航器组件的状态，以借助AsyncStorage来更改语言。这是我执行功能的代码：

export class Settings extends Component {
    constructor(props) {
        super(props);
        this.state = {
            toggle: false
        };
    }
    funcCallen = async () => {
        try {
            await AsyncStorage.setItem('toggle', JSON.stringify(false))
            this.setState({ toggle: false})
        } catch (e) {
            console.log(e)
        }
        console.log('en:', this.state.toggle)
    }
    funcCallch = async () => {
        try {
            await AsyncStorage.setItem('toggle', JSON.stringify(true))
            this.setState({ toggle: true})
        } catch (e) {
            console.log(e)
        }
        console.log('ch:', this.state.toggle)
    }
    render() {

        return (
            <Container>
                <Header>
                    <Body style={{ marginLeft: 20 }}>
                        <Title >Settings</Title>
                    </Body>
                </Header>
                <Content>
                    <View style={{ flexDirection: 'row', paddingVertical: 20, paddingHorizontal: 20 }}>
                        <Icon name='lock' style={{ color: '#bde814', marginRight: 10 }} />
                        <Text style={{ fontSize: 20, fontWeight: '400', color: '#42a6ed' }}>{this.state.toggle ? "登入" : "Sign In"}</Text>
                    </View>
                    <Separator bordered>
                        <Text style={{ fontSize: 20, fontWeight: '400' }}>Language</Text>
                    </Separator>
                    <TouchableOpacity onPress={() => this.funcCallen()}>
                        <ListItem>
                            <Text>English</Text>
                        </ListItem>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => { this.funcCallch() }}>
                        <ListItem last>
                            <Text>Chinese</Text>
                        </ListItem>
                    </TouchableOpacity>
                    <Separator bordered>
                    </Separator>
                </Content>
            </Container>
        )
    }
}

export default Settings

这是另一个选项卡导航器组件，我要在其中更改先前组件函数funcCallen和funcCallch的执行状态：

class Toolbox1 extends Component{
   
  constructor(props) {
    super(props);
    this.state = {
      toggle: false
    }
  }
 
  componentWillMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener("didFocus", () => {
       try {
        const value =  AsyncStorage.getItem('toggle')
         this.setState({ toggle: JSON.parse(value) })
         console.log('mate:', this.state.toggle)
      } catch(e) {
        // error reading value
      }
    });
  }

  render() {
    console.log('new:', this.state.toggle)
    return (
        <Container>
        <Header>
            <Body style={{marginLeft:20}}>
              <Title>Toolbox</Title>
            </Body>
          </Header>
        <Content>
          <ListItem onPress={()=> this.props.navigation.navigate('Toolbox')}>
          <Icon name='stats' style={{color:'blue'}}/>
            <Body>
              <Text style={styles.text}>4D Number Stats & Detail</Text>
            </Body>
          </ListItem>
          <ListItem onPress={()=> this.props.navigation.navigate('LuckySpin')}>
          <Icon name='planet' style={{color:'blue'}}/>
            <Body>
              <Text style={styles.text}>{this.state.toggle ? "旋转我的运气" : "Spin My Luck"}</Text>
            </Body>
          </ListItem>
        </Content>
      </Container>
    );
  }
}
export default withNavigation(Toolbox1)

现在它不会更改Toolbox1中的状态。我该怎么做？

通过函数调用在其他选项卡导航器上更改状态

0 个答案: