接入反应后如何改变屏幕？[使用Stack Navigator]

Question

我想：(我正在使用堆栈导航器)

1. 执行一个fetch (HTTP到API)，
2. 评估响应并采取适当的操作(无论是向用户显示错误消息，如果失败，还是通过显示下一个屏幕(如果成功)让用户进步)。

我被困在第2步，我无法评估结果和更改屏幕，而不避免以下错误信息：

警告:在现有状态转换期间(例如在render或其他组件的构造函数中)不能更新。呈现方法应该是道具和状态的纯函数；构造器副作用是一种反模式，但可以移动到componentWillMount。

我只是最近才开始反应本土的，如果这太明显的话，我很抱歉。下面是我的代码：

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

首先，您需要检查web服务的响应是正确的还是错误的。如果您的响应是错误的，那么您必须显示一个警报，或者您必须在当前屏幕上显示一些消息。如果你想表现出警觉-

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

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

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

现在，如果响应为真，则必须使用堆栈导航器导航屏幕。所以你得做一堆模版-

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

现在，您必须导航，无论何时您必须导航。所以你必须用_OnPressEvent()写代码-

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

这里'Profile‘您的屏幕名和“名称：’露西‘是如果您想传递数据，如姓名或任何您想传递的数据，那么您可以这样写。

我希望你能理解。问我任何问题。