如何在 React Native 中获取后更改屏幕？ [使用堆栈导航器]

Question

我想：（我正在使用堆栈导航器）

执行抓取（HTTP post 到 API），
评估响应并采取适当的措施（无论是在失败时向用户显示错误消息，还是在成功时通过显示下一个屏幕让他们继续前进）。

我卡在了第 2 步，我无法评估结果并在不避免此错误消息的情况下更改屏幕：

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount

我最近才开始使用 React Native，抱歉，如果这太明显了。下面是我的代码：

render() {
    const { navigate } = this.props.navigation;
    return (
                <View style = {styles.container}>
                   <TextInput
                        placeholder='Email Address'
                        onChange={(event) => this.setState({email: event.nativeEvent.text})}
                        value={this.state.email}
                   />
                   <TouchableHighlight underlayColor={'transparent'} onPress={this._onPressButton.bind(this)}>
                       <Image source = {submit} style = { styles.error_separator } ></Image>
                   </TouchableHighlight>
                   <TouchableHighlight underlayColor={'transparent'} onPress={() => navigate('Login')}>
                            <Image source = {login} style = { styles.separator } ></Image>
                        </TouchableHighlight>
                        <TouchableHighlight underlayColor={'transparent'} onPress={() => navigate('Index')}>
                            <Ionicons name="ios-arrow-dropleft-circle" size={44} color="white" style={styles.backicon}/>
                        </TouchableHighlight>
                </View>
    )
}

_onPressButton () {
    this.setState({visible: true});
    fetch('the api url', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            email: this.state.email
        })
    })
        .then(response=>response.json())
        .then(response => {
            this.setState({visible: false});
            if(response.userContinue) {
                userDetails.email = this.state.email
                /*
         ******** This is where I want to be changing the screen, I already 
tried putting navigate (by passing it as a function parameter) here, but that fails ********
                */
            } else {
                this.setState({input: {
                    height: window.height*.07,
                    width: window.width*.75,
                    paddingLeft: window.height*.025,
                    marginTop: window.height*.018,
                    fontSize: window.height*.025,
                    borderWidth: 1,
                    borderColor: '#e74c3c',
                    borderRadius: 8,
                    color: '#ffffff',
                }, error: response.message });
            }
        })
}

非常感谢任何帮助，谢谢。

[编辑]我故意删除了一些与问题无关的代码，如果它看起来很奇怪，请不要介意。

Answer 1

首先您需要检查网络服务的响应是TRUE还是FALSE。如果您的回答是 FALSE，那么您必须显示一个警报，或者您必须在当前屏幕上显示一些消息。如果你想显示警报 -

 Alert.alert(
         'You need to add your message here...'
      )

如果您想添加一些文本，只需添加文本元素，例如

<Text style={style.yourStyle}>Your message</Text>

现在，如果您的回答是 TRUE，那么您必须使用堆栈导航器来导航您的屏幕。为此，您必须制作一个 Stack Modal，例如 -

const ModalStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Profile: {
    path: 'people/:name',
    screen: MyProfileScreen,
  },
});

现在需要导航的时候就得导航。所以你必须在 _OnPressEvent() -

中编写代码

this.props.navigation.navigate('Profile', {name: 'Lucy'})

这里'Profile'你的网名，"name : 'Lucy'"是如果你想传递姓名之类的数据，或者你想传递数据的任何东西，那么你可以这样写。

希望你明白。有任何问题问我。

如何在 React Native 中获取后更改屏幕？ [使用堆栈导航器]

How to change screen after fetch in React Native? [Using Stack Navigator]

reactjs

react-native

stack-navigator