Question

在我的应用程序中，我想从模式中的按钮导航到另一个屏幕。我尝试了正常的锻炼，但没有成功。模态正确关闭，但导航不会发生。我在这里做错了什么？我试图从navigationToMainFeed（）进行导航，并且它保持在同一屏幕中而不进行导航。

class TrainerRegistraionScreen extends Component {

    constructor(props) {
        super(props);

        this.state = { 
            statement: {
                value: "",
                valid: false,
                touched: false,
                validationRules: {
                    minLength: 1
                }
            },
            keyboardVisible: false,
            buttonTouched: false,
            displayModal: false
        }
    }


    // handle statement changes
    statementChangedHandler = value => {
        this.setState(prevState => {
            return {
                statement: {
                    ...prevState.statement,
                    value: value,
                    touched: true,
                    valid: validate(value, prevState.statement.validationRules)
                },
                buttonTouched: false
            };
        });
    };

    // check for empty fields of the screen
    _getFiledsNotEmptyStatus = () => {
        return this.state.statement.value.length > 0 ? true : false;
    }

    // display message
    _displayMessage = () => {
        let { keyboardVisible } = this.state;

        let content = (
            <View style={{ width: "90%", marginBottom: 10, alignSelf: 'center' }}>
                <Text style={{ fontSize: 16, color: "#707070", fontWeight: "300" }}>
                    Please write a short statement about your focuses as a trainer. 
                    It is important to show your capabilities and knowledge base in
                    exercise and nutrition science. Inclue all certification details.
                </Text>
            </View> 
        );

        if (keyboardVisible) {
            content = null; 
        } 

        return content;
    }

    // navigate to main feed 
    navigateToMainFeed = () => {
        this.props.navigation.navigate("mainfeed");
        this.setState({
            displayModal: false
        });


    }

     // register trainer
     async registerTrainer() {

        let {
            firstName,
            lastName,
            email,
            password
        } = this.props;

        this.setState({
            buttonTouched: true 
        }); 

        let trainer = {
            firstName: firstName,
            lastName: lastName,
            email: email,
            password: password
        }

        await this.props.registerTrainer(trainer);

        if (!this.props.signUpHasError) {
            this.setState({
                displayModal: true
            });
        }
    }

    // render popup modal
    _renderPopupModal() {  
        return (
            <ModalPopup visible={this.state.displayModal}>
                <TrainerMessage
                    onPress={() => this.navigateToMainFeed()}
                />
            </ModalPopup>
        );
    }


    // render
    render() { 
        let { userRegistrationInProgress } = this.props;

        return (
            <View>
                <ImageBackground source={BackgroundOnly} style={{ width: width, height: height }} >

                    <View style={{ marginTop: "5%" }}>
                        <ClickableIcon
                            source={BackArrow}
                            height={30}
                            width={30}
                            onIconPressed={() => {this.props.navigation.navigate("trainerExperience");}}
                        />
                    </View>

                    <View style={styles.headerStyles}>
                        <HeadingText  
                            fontSize={26}
                            fontWeight={300} 
                            textAlign="left" 
                            fontColor="#707070"
                        >
                           Personal Statement
                        </HeadingText>
                    </View>

                    <View>
                        {this._displayMessage()}
                    </View>

                    <View style={styles.detailInput}> 
                        <DetailInput
                            inputStyle={styles.inputStyles} 
                            height={120}
                            width={width - 40}
                            multiline={true}
                            numberOfLines={6}
                            underlineColorAndroid="transparent"
                            maxLength={500}
                            editable={!userRegistrationInProgress}
                            onChangeText={value => this.statementChangedHandler(value)}
                        />
                    </View>

                    <View>
                        <RoundedButton
                            buttonStyle={styles.buttonStyle}
                            text="FINISH"
                            submitting={userRegistrationInProgress}
                            onPress={() => this.registerTrainer()}
                            disabled={!this._getFiledsNotEmptyStatus()}
                        />
                    </View>

                    {this._renderPopupModal()}

                </ImageBackground>
            </View>
        );
    }

    static navigationOptions = { header: null }
}

Answer 1

首先关闭模式并浏览屏幕

    this.setState({
        displayModal: false
    },()=>{
        this.props.navigation.navigate("mainfeed");
    });

通过模式按钮来响应本地导航

1 个答案: