我有一个 react native 组件，我正在尝试通过 connect 将该组件连接到 react-redux，但出现错误

Question

I have a react native component and i am trying to connect that component to react-redux through connect, but i am getting error stating the getScreen() defined for route didnt returned a valid screen. But when i remove connect from the component it works fine in the navigator.But when i use connect , i am getting the error.

Below is the component

class LoginScreen extends Component {

  componentDidMount() {
    // this.props.login();
    console.log(this.props.auth, 'this is staet')
  }

  render() {
    return (
      <Box f={1}>
        <Box f={1}>
          <ImageBackground source={images.bg} style={styles.container}>
            <Box bg="white" f={0.5} w="100%" p="lg" style={styles.abs}>
              <Text size={'2xl'}>
                OTP has been
              </Text>
              <Text size={'2xl'}>
                send to your mobile
              </Text>
              <Text size={'md'}>
                Verify your mobile number
              </Text>
            </Box>
          </ImageBackground>
        </Box>
      </Box>
    );
  }
}

export default
 connect(
  mapStateToProps, {
    login
  }
) 
(LoginScreen);

And here is the navigator file

const AuthNavigator = createStackNavigator({
    Login: {
        getScreen: () => require('./LoginScreen').default
    }
}, {
    navigationOptions: {
        header: null
    }
})


const TabNavigator = createBottomTabNavigator({
    Home: {
        getScreen: () => require('./HomeScreen').default
    }
})


const MainNavigator = createStackNavigator({
    Tab: TabNavigator
});


const AppNavigator = createSwitchNavigator({
    Splash: {
        getScreen: () => require('./SplashScreen').default
    },
    Auth: AuthNavigator,
    Main: MainNavigator
}, {
    initialRouteName: 'Splash'
});

Answer 1

试试这个代码。

import LoginScreen from './screens/LoginScreen' const AuthNavigator = createStackNavigator({ Login: { screen: LoginScreen, } }, { navigationOptions: { header: null } })