#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-навигации, и он переходит на указанный экран.