反应导航导航到其他屏幕答案

【问题标题】：react navigation navigate to other screen反应导航导航到其他屏幕
【发布时间】：2017-05-23 05:09:53
【问题描述】：

我尝试登录，当isLoggedIn = true 然后导航到Profile，但总是给我错误

undefined 不是一个对象（评估 '_this.props.navigation'）

我的代码有什么问题？有人可以帮我吗？

import React from 'react'
import {
    Image,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from 'react-native'
import { Field, reduxForm } from 'redux-form'
import { Container, Content, InputGroup, Button , Input, Icon, Item } from 'native-base';
import { login } from '../Action/Action';
import {NavigationActions} from "react-navigation";
import styles from './Style';
import { connect,  } from 'react-redux'

 }
function submit(values) {
    console.log(values);

}
const renderInput = ({ input: { onChange, ...restInput }}) => {
    return <Input onChangeText={onChange} {...restInput} />
}
}
const Form = props => {
    //const {navigate} = this.props.navigation;
    //let _navigateTo;
    if (props.appUser.isLoggedIn) {
        console.log("haloooo");
        const navigateAction = NavigationActions.navigate({
            routeName: 'Profile',
            params: {},
            action: NavigationActions.navigate({ routeName:     'SubProfileRoute'})
        })

        this.props.navigation.dispatch(navigateAction)
    }
    const { handleSubmit } = props
    //console.log(props.appUser);
    return (
        <Container >
            <Content>
                <Content>
                    <View style={styles.container}>
                        <Image source={require('../Assets/Octocat.png')} style={{width: 128, height: 128}} />

                    </View>
                </Content>
                <Content style={{paddingLeft:10,paddingRight:10,paddingBottom:5, paddingTop:30}}>
                    <Item rounded>
                        <Field name="username" component={renderInput} />
                    </Item>
                </Content>
                <Content style={{paddingLeft:10,paddingRight:10}}>
                    <Item rounded>
                        <Field name="password" component={renderInput} />
                    </Item>
                </Content>
                <Content style={{padding:10}}>
                    <Button  onPress={handleSubmit(props.onLogin)} block info>
                        <Text>Login</Text>
                    </Button>
                </Content>
            </Content>

        </Container>

    )
}
const myReduxForm = reduxForm({
    form: 'MyReduxForm', 
})(Form)
function mapStateToProps(state) {
    return {
        appUser: state.appUser,
    }
}

function mapDispatchToProps(dispatch) {
    return {
        onLogin: (data) => { dispatch(login(data)); },
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(myReduxForm)
// export default reduxForm({
//     form: 'test'
// })(Form)
// export default reduxForm({
//     form: 'test'
// })(Form)

【问题讨论】：

尝试将this.props 替换为props，例如props.navigation.navigate()。

标签： react-native redux react-redux redux-form

【解决方案1】：

尝试使用withNavigation。使用组件FormWithNavigation如下代码所示

const Form = ({ navigation }) => {
 //..
navigation.navigate('XXX')
}

const FormWithNavigation = withNavigation(Form);

【讨论】：

将 const Form = props => { } 替换为 ({ navigation }) ?

【解决方案2】：

你使用 this.props 而不是 props

这个应该可以的

const { handleSubmit, navigation: {navigate} } = props

【讨论】：