Question

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

undefined不是一个对象（评估＆＃39; _this.props.navigation＆＃39;）

mycode有什么问题？有人能帮助我吗？

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)

Answer 1

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

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

const FormWithNavigation = withNavigation(Form);

Answer 2

您只使用this.props props

这个应该有效

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

反应导航导航到其他屏幕

2 个答案: