Борьба с навигацией после входа в систему - реагировать родной

Question

Я столкнулся с проблемой при переходе с экрана входа в систему на Dashboard в реактивной среде и обнаружил проблему, подобную TypeError: undefined не является объектом (для большей ясности оцениваем «_this.props.navigation.navigate»), прилагаю скриншот и изображения,Любая помощь будет заметна.

App.js

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import {createSwitchNavigator, createAppContainer}  from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {createDrawerNavigator}  from 'react-navigation-drawer';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';  

import WelcomeScreen  from './screens/Welcome';
import LoginScreen  from './screens/Login';
import DashboardScreen  from './screens/Dashboard';
import SearchScreen from './screens/Search';
import ProfileScreen from './screens/Profile';
import BookingScreen from './screens/Booking';
import SupportScreen from './screens/Support';

const App: () => React$Node = () => {
  return (
    <AppContainer />
  );
};


const DashboardTabNavigator = createBottomTabNavigator(
  {
        Search :{screen : SearchScreen,
          navigationOptions:{  
            headerTitle: 'Search',
            tabBarLabel:'Search',  
            tabBarIcon:({tintColor})=>(  
                <Icon name="search" color={tintColor} size={30}/>  
            )  
          }  
      },
      Booking :{screen : BookingScreen,
        navigationOptions:{  
          headerTitle: 'Booking',
          tabBarLabel:'Booking',  
          tabBarIcon:({tintColor})=>(  
              <Icon name="list" color={tintColor} size={30}/>  
          )  
        }  
      },
      Support :{screen : SupportScreen,
        navigationOptions:{  
          headerTitle: 'Support',
          tabBarLabel:'Support', 
          tabBarIcon:({tintColor})=>(  
              <Icon name="support" color={tintColor} size={30}/>  
          )  
        }  
      },
      Profile :{screen : ProfileScreen,
        navigationOptions:{  
          headerTitle: 'Profile',
          tabBarLabel:'Profile',  
          tabBarIcon:({tintColor})=>(  
              <Icon name="user" color={tintColor} size={30}/>  
          )  
        }  
      },
  },
  {
    tabBarOptions: {
      showIcon: 'true', // Shows an icon for both iOS and Android
    },
  }
);

const DashboardStackNavigator = createStackNavigator({
  Welcome :{screen : WelcomeScreen},
  DashboardTabNavigator : DashboardTabNavigator
});

const AppSwitchNavigator = createSwitchNavigator({
  Welcome :{screen : WelcomeScreen},
  Dashboard :{screen :  DashboardStackNavigator}
});

const AppContainer = createAppContainer(AppSwitchNavigator);

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

Скрипт для Welcome.js

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Animated,
    Button,
    Dimensions,
    TouchableOpacity,
    TouchableHighlight,
    Image,
    ImageBackground,
    ScrollView,
    StatusBar, 
    Alert
} from 'react-native';

let { height, width } = Dimensions.get('window');

let InputWidth = width - ((width * 10) /100);

import Icon from 'react-native-vector-icons/FontAwesome'; 

import LoginScreen from './Login';

class WelcomeScreen extends Component{
    constructor(props) {
        super(props);
        this.state = { isAnimationVisible: true, animationProgress: new Animated.Value(0) };
        //this.LoginScreen = this.LoginScreen.bind(this);
    }

    componentDidMount() {
        Animated.timing(this.state.animationProgress, { toValue: 1, duration: 5000 })
            .start(() => this.setState(s => ({ ...s, isAnimationVisible: false })));
    }

    render() {
        if (this.state.isAnimationVisible) {
            const interpolation = this.state.animationProgress.interpolate({ inputRange: [0, 1], outputRange: [0, 1] });
            return (
                <View style={styles.backgroundColor}>
                     <Text style={styles.textAlignmentSplashHeader}>Text App</Text>
                     <View style={styles.textAlignmentSplashCenter}>
                        <Text style={styles.textAlignmentSplash}> <Icon name="check-square-o" color="#00bfff" size={20}/> Verified Provider</Text>
                        <Text style={styles.textAlignmentSplash}> <Icon name="check-square-o" color="#00bfff" size={20}/> Trained Professional</Text>
                        <Text style={styles.textAlignmentSplash}> <Icon name="check-square-o" color="#00bfff" size={20}/> Compare Prices</Text>
                        <Text style={styles.textAlignmentSplash}> <Icon name="check-square-o" color="#00bfff" size={20}/> At door step</Text>
                     </View>
                </View>
            );
        }
        else {
            return (<LoginScreen />);
        }
    }
}


export default WelcomeScreen;

const styles = StyleSheet.create({
    backgroundColor: {
        flex: 1,
        resizeMode: 'cover', // or 'stretch',
        justifyContent: 'center',
        backgroundColor: '#ffffff'
    },
    textAlignmentSplashHeader :{
        textAlign:'center',
        fontSize:35,
        //color : '#70AB8F',
        color : '#DC5B21'
    },
    textAlignmentSplashCenter :{
        width: InputWidth,
        margin : '20%',
        justifyContent: 'center',
    },
    textAlignmentSplash :{
        textAlign:'left',
        fontSize:20,
        color : '#808080'
    },
  }); 

Login.js

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Button,
    TouchableOpacity,
    TouchableHighlight,
    Image,
    ImageBackground,
    ScrollView,
    StatusBar, 
    Alert
} from 'react-native';

import { Dashboard } from './Dashboard';

class LoginScreen extends Component{
    static navigationOptions = {
        header : 'Login'
    } 

    constructor(props){
        super(props);
        this.state={
            mobile : null
        }
        this.__login = this.__login.bind(this);
    }
    render(){
        return(
            <View style={{flex : 1, alignItems : 'center', justifyContent : 'center'}}>
                <Text>LoginScreen</Text>
                <Button 
                    title ="Login"
                    onPress={this.__login}
                />
            </View>
        );
    }
    __login = ()=>{
        this.props.navigation.navigate('Dashboard')
    }
}

export default LoginScreen; 

Dashboard.js

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Button,
    TouchableOpacity,
    TouchableHighlight,
    Image,
    ImageBackground,
    ScrollView,
    StatusBar, 
    Alert
} from 'react-native';

class DashboardScreen extends Component{
    render(){
        return(
            <View style={{flex : 1, alignItems : 'center', justifyContent : 'center'}}>
                <Text>DashboardScreen</Text>
            </View>
        );
    }
}

export default DashboardScreen; 

И ниже - ошибка после нажатия кнопки входа в систему на экране входа в систему

ниже, появляется ошибка после нажатиякнопка входа, навигационный код находится в Login.js

Пожалуйста, помогите мне.

Answer 1

обновить ваш createSwitchNavigator

 const AppSwitchNavigator = (signedIn = false)=>createSwitchNavigator({
  Welcome :{screen : WelcomeScreen},
  DashboardTabNavigator : DashboardTabNavigator
},
  {
        initialRouteName: signedIn ? 'DashboardTabNavigator' : 'Welcome',
  },

);


const AppContainer = createAppContainer(AppSwitchNavigator(isLogin));

сохранить isLogin в формате приставки или в контекстном API, когда для входа в систему просто обновить значение isLogin на true, и вы перейдете к Dashboard.

Answer 2

Вы должны использовать WithNavigation в LoginScreen компоненте следующим образом:

import React, {Component} from 'react';
import { withNavigation } from 'react-navigation';

...

export default withNavigation(LoginScreen);

Вы используете LoginScreen в качестве компонента вместо страницы, а LoginScreen не определен в вашем маршрутеопределение, поэтому он не имеет доступа к this.props.navigation по умолчанию.