React Native：React导航StackNavigator不起作用。出现错误：“未定义不是对象（正在评估'_this3.props.navigation.navigate'）”

Question

I'm facing one issue I have simple and usual navigation flow with Stacknavigation and once they login they will see the Tab navigation. 我面临一个问题，即Stacknavigation具有简单且通常的导航流程，一旦他们登录，他们将看到Tab导航。

In tab navigation I have chat screen which will render segments in one screen, each segment will produce a list of chat heads which is supposed to be open in the individual chat screen. 在选项卡导航中，我具有聊天屏幕，该屏幕将在一个屏幕中呈现片段，每个片段将产生一个聊天头列表，该列表应该在单个聊天屏幕中打开。

Chatscreen.js

 import React, { Component } from "react"; import { View, Text, StyleSheet } from "react-native"; import AdminChat from './Chat/AdminChat'; import AcademicChat from './Chat/AcademicChat'; import ActiveChat from './Chat/ActiveChat'; import { createMaterialTopTabNavigator } from 'react-navigation'; import Icon from 'react-native-vector-icons/Ionicons'; import { Button, Container, Content, Header, Body, Left, Right, Title } from 'native-base'; class ChatScreen extends Component{ state = { activeIndex : 0 } segmentClicked = (index) => { this.setState({activeIndex: index}) } renderSection = () => { if (this.state.activeIndex === 0) { return <AdminChat /> } else if (this.state.activeIndex === 1) { return <AcademicChat /> } else { return <ActiveChat /> } } render(){ return ( <Container> <Header style={{backgroundColor: '#8E44AD'}}> <Left> </Left> <Body> <Title style={{color: 'white'}}>Chat</Title> </Body> <Right /> </Header> <View style={styles.container}> <View style={{flexDirection: 'row', justifyContent: 'space-around', borderBottomWidth: 1, borderBottomColor: 'grey' }}> <Button transparent onPress={()=>{this.segmentClicked(0)}} active={this.state.activeIndex === 0}> <Text style={[this.state.activeIndex === 0 ? { color: '#8E44AD' } : {color: 'grey'}]}>Admin</Text> </Button> <Button transparent onPress={()=>{this.segmentClicked(1)}} active={this.state.activeIndex === 1}> <Text style={[this.state.activeIndex === 1 ? { color: '#8E44AD' } : {color: 'grey'}]}>Academic</Text> </Button> <Button transparent onPress={()=>{this.segmentClicked(2)}} active={this.state.activeIndex === 2}> <Text style={[this.state.activeIndex === 2 ? { color: '#8E44AD' } : {color: 'grey'}]}>Chat</Text> </Button> </View> {this.renderSection()} </View> </Container> ); } } export default ChatScreen;

from above code, I have generated Chat Screen, which is a part of tab navigator, and in that I am loading the AdminScreen.js. 从上面的代码中，我生成了“聊天屏幕”，它是选项卡导航器的一部分，并且正在加载AdminScreen.js。

 import React, { Component } from "react"; import { View, Text, FlatList, ActivityIndicator, StyleSheet } from "react-native"; import { List, ListItem, SearchBar } from "react-native-elements"; import axios from 'axios'; class AdminChat extends Component{ state = { adminChat : [], userid: "2980", usertype: '1' } componentWillMount = async () => { console.log(this.state.userid) try { let { data } = await axios .post("https://tgesconnect.org/api/Communication_group", { userid: this.state.userid, group_id: '0', is_sub_group: '0', usertype: this.state.usertype, }) .then(response => { //console.log(response.data.data.group_list); if (response.data.status === "success") { //console.log("Success") this.setState({ adminChat: response.data.data.group_list, }); } else { alert("Something went wrong"); } }); } catch (err) { console.log(err); } //console.log(this.state.adminChat.group_name[0]) }; renderSeparator = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#CED0CE", }} /> ); }; render () { return ( <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}> <FlatList data={this.state.adminChat} renderItem={({ item }) => ( <ListItem // roundAvatar title={item.group_name} // subtitle={item.email} // avatar={{ uri: item.picture.thumbnail }} containerStyle={{ borderBottomWidth: 0 }} onPress={()=>this.props.navigation.push('onescreen')} /> )} keyExtractor={item => item.group_id} ItemSeparatorComponent={this.renderSeparator} /> </List> ) } } export default AdminChat; const styles = StyleSheet.create({ container:{ flex:1, alignItems:'center', justifyContent:'center' } });

Now if I click to open a single List item and use this.props.navigation.navigate('adminSingle.js') it is not working, how can I solve it? 现在，如果我单击以打开一个列表项，并使用this.props.navigation.navigate（'adminSingle.js'），它将无法正常工作，该如何解决？

I am using "react-navigation": "^2.6.0" 我正在使用“反应导航”：“ ^ 2.6.0”

Answer 1

Looks like you forgot to pass navigation as prop for AdminScreen 好像您忘了将导航作为AdminScreen道具

renderSection = () => {
  if (this.state.activeIndex === 0) {
    return <AdminChat navigation={this.props.navigation}/>
  } else if (this.state.activeIndex === 1) {
    return <AcademicChat />
  } else {
    return <ActiveChat />
  }
}

React Native：React导航StackNavigator不起作用。出现错误：“未定义不是对象（正在评估'_this3.props.navigation.navigate'）”

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-07-06 11:46:57

React Native：React导航StackNavigator不起作用。 出现错误：“未定义不是对象（正在评估&#39;_this3.props.navigation.navigate&#39;）”

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-07-06 11:46:57

React Native：React导航StackNavigator不起作用。出现错误：“未定义不是对象（正在评估'_this3.props.navigation.navigate'）”

解决方案1
0 已采纳 2018-07-06 11:46:57