2

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

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

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

警告：在现有状态转换期间无法更新（例如在render或其他组件的构造函数内）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至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 });
            }
        })
}

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

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

4

1 回答 1

2

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

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

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

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

现在，如果您的响应为 TRUE，那么您必须使用堆栈导航器来导航您的屏幕。为此，您必须制作一个堆栈模式，例如-

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

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

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

这里的“配置文件”是您的屏幕名称和“名称：'Lucy'”，如果您想传递名称或任何您想要传递数据的数据，那么您可以这样写。

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

于 2017-09-17T08:26:08.363 回答