Question

我想:(我正在使用堆栈导航器）

执行提取（HTTP发布到API），
评估响应并采取适当的措施（是否向用户显示错误消息，如果失败或通过显示下一个屏幕让他们进展，如果成功）。

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

警告：在现有状态转换期间（例如在render或其他组件的构造函数中）无法更新。渲染方法应该是道具和国家的纯粹功能;构造函数的副作用是反模式，但可以移动到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

首先，您需要检查Web服务的响应是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'})

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

我希望你理解。向我询问任何疑问。

如何在React Native中获取后更改屏幕？ [使用Stack Navigator]

1 个答案: