Не удается перейти на другой экран в родном приложении IOS

#react-native #expo #react-navigation

#реагировать-родной #Экспо #реагировать-навигация

Вопрос:

У меня есть приложение React Native для IOS, в котором я получаю неопределенную ошибку при переходе на другую страницу.

Ниже приведен навигатор, в котором я объявил экран «Настройка».

FRNavigator.js

 import React from 'react'; import { View,StyleSheet,SafeAreaView,Button,ScrollView,Text} from 'react-native'; import { createSwitchNavigator,createAppContainer } from 'react-navigation'; import {createStackNavigator} from 'react-navigation-stack'; import MainPage from '../screens/FaceRecog/MainPage'; import UploadPage from '../screens/FaceRecog/UploadPage'; import { createDrawerNavigator,DrawerItems} from 'react-navigation-drawer'; import Icon from 'react-native-vector-icons/Ionicons'; import DownloadPage from '../screens/FaceRecog/DownloadPage'; import ForgotPasswordScreen from '../screens/UI/ForgotPasswordScreen'; import ImageBrowserScreen from '../screens/FaceRecog/ImageBrowserScreen'; import LoginScreen from '../screens/UI/LoginScreen'; import RegisterScreen from '../screens/UI/Register'; import AddDevicePage from '../screens/FaceRecog/AddDevicePage'; import LogoutComponent from '../components/FaceRecog/LogoutComponent' import DrawerHeader from '../components/FaceRecog/DrawerHeader'; import CommunicateComponent from '../components/FaceRecog/CommunicateComponent'; import ManageDevice from '../screens/FaceRecog/ManageDevicePage'; import Register from '../screens/UI/Register'; import { Settings } from '../screens/FaceRecog/Settings';   const AuthNavigator = createStackNavigator( { Login: {  screen:LoginScreen,  navigationOptions: {  headerShown: false, } }, SignUp: {  screen:Register, }, ForgotPasswordPage:ForgotPasswordScreen }, );  const MainPageNavigator = createStackNavigator({ Home:MainPage, AddDevice:AddDevicePage, Upload:UploadPage, ImagePicker:ImageBrowserScreen, ManageDev:ManageDevice }) const DrawerNavigator = createDrawerNavigator( {  Home: {  screen:MainPageNavigator,  navigationOptions:{  drawerIcon:(  lt;Icon  name='md-home-sharp' size={25} color='grey'/gt;  )  } },  Download: {  screen:DownloadPage,  navigationOptions:{  drawerIcon:(  lt;Icon  name='md-download'  type='ionicons' size={25} color='grey'onPress={ () =gt; {    }}/gt;    )  } }, Exit: {  screen:Register,  navigationOptions:{  drawerIcon:(  lt;Icon  name='exit-outline'  type='ionicons' size={25} color='grey' onPress={ () =gt; {   }}/gt;  )  }  }   },  {  contentOptions:{  activeTintColor: '#e91e63',  }  , contentComponent: props =gt;   lt;ScrollViewgt;  lt;SafeAreaView style={{flex:1}} forceInset={{ top: 'always', horizontal: 'never',   height:180 }}gt;  lt;View style={{width:'100%', backgroundColor: 'white', }}gt;   lt;DrawerHeader /gt;  lt;/Viewgt;  lt;DrawerItems {...props} /gt;  lt;LogoutComponent /gt;  lt;View  style={{  borderBottomColor: 'grey',  borderBottomWidth: 1   }}/gt;   lt;View style={styles.communicateview}gt;  lt;Text style={styles.communicatetext}gt;Communicatelt;/Textgt;  lt;CommunicateComponent /gt;  lt;/Viewgt;  lt;/SafeAreaViewgt;  lt;/ScrollViewgt;,   },  {  Setting:Settings  },  );    const MainNavigator = createSwitchNavigator({  Auth: AuthNavigator,  App:DrawerNavigator  });   const styles = StyleSheet.create({  communicatetext:{  fontWeight:'800',  color:'grey'  },  communicateview:{  top:'3%',  left:'3%'  }  })   export default createAppContainer(MainNavigator);  

Ниже приведен компонент CommunicateComponent в ящике, где я вызываю props.navigation.navigate().

CommunicateComponent.js

 import React from 'react'; import { Platform, TouchableOpacity, Alert, View, Text, StyleSheet ,ScrollView} from  'react-native'; import Icon from 'react-native-vector-icons/Ionicons';  export default class CommunicateComponent extends React.Component { navigateTo = (routeName) =gt; {  this.props.navigation.navigate(routeName)  }  render() { return( lt;Viewgt;  lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon  name='settings'  type='ionicons' size={25} color='grey'/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}   onPress={this.navigateTo('Setting')}  gt;  lt;Text style={styles.settingstext}gt; Settings lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon  name='md-heart-circle'  type='ionicons' size={25} color='grey'/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}   gt;  lt;Text style={styles.settingstext}gt; Rate Us lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon  name='ios-share-social'  type='ionicons' size={25} color='grey'/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}   gt;  lt;Text style={styles.settingstext}gt; Share lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon  name='information-circle'  type='ionicons' size={25} color='grey'/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}   gt;  lt;Text style={styles.settingstext}gt; About lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt; lt;/Viewgt; ) } }  const styles = StyleSheet.create({ iconview:{  top:'30%',  left:'3%' }, logoutview:{  left:'20%',  bottom:'20%' }, settingstext:{  fontWeight:'bold' } })  

Когда я нажимаю кнопку «Настройки» (Осязаемая непрозрачность) в Навигаторе ящиков ,я хочу закрыть ящик и перейти на страницу настроек, но я получаю сообщение об ошибке ниже.

Ошибка типа: неопределенный не является объектом (оценка ‘_this.props.navigation.navigate’).

Может ли кто-нибудь сказать, где я ошибаюсь.заранее спасибо.

Ответ №1:

Компонент CommunicateComponent не имеет доступа к навигации. Вы должны передать его, чтобы включить любое возможное действие. Измените это:

 contentComponent: {navigation} =gt; lt;ScrollViewgt; lt;SafeAreaView style={{flex:1}} forceInset={{ top: 'always', horizontal: 'never',   height:180 }}gt;  lt;View style={{width:'100%', backgroundColor: 'white', }}gt;   lt;DrawerHeader /gt;  lt;/Viewgt;  lt;DrawerItems {...props} /gt;  lt;LogoutComponent /gt;  lt;View  style={{  borderBottomColor: 'grey',  borderBottomWidth: 1  }}/gt;   lt;View style={styles.communicateview}gt;  lt;Text style={styles.communicatetext}gt;Communicatelt;/Textgt;  lt;CommunicateComponent navigation={navigation} /gt;  lt;/Viewgt; lt;/SafeAreaViewgt; lt;/ScrollViewgt;  

Ответ №2:

Я изменил компонент CommunicateComponent с класса на функциональный компонент, как показано ниже:

 import React from 'react'; import { Platform, TouchableOpacity, Alert, View, Text, StyleSheet  ,ScrollView} from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; import {withNavigation} from 'react-navigation';  const CommunicateComponent = (props)=gt;{ return( lt;Viewgt; lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon name='settings' type='ionicons' size={25} color='grey'onPress={ () =gt; {    }}/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}   onPress={ ()=gt;props.navigation.navigate({routeName:'Setting'})} gt;  lt;Text style={styles.settingstext}gt; Settings lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon name='md-heart-circle' type='ionicons' size={25} color='grey'onPress={ () =gt; {    }}/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}  gt;  lt;Text style={styles.settingstext}gt; Rate Us lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon name='ios-share-social' type='ionicons' size={25} color='grey'/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}  gt;  lt;Text style={styles.settingstext}gt; Share lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon name='information-circle' type='ionicons' size={25} color='grey'onPress={ () =gt; {  }}/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}  gt;  lt;Text style={styles.settingstext}gt; About lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt; lt;/Viewgt;  )  }  const styles = StyleSheet.create({ iconview:{  top:'30%',  left:'3%' }, logoutview:{  left:'20%',  bottom:'20%' }, settingstext:{  fontWeight:'bold' } })  

экспорт по умолчанию с навигацией(компонент связи);

И я использовал {withNavigation} из react-навигации, и он переходит на указанный экран.