Question

我遇到的一个问题是，Stacknavigation的导航流程非常简单且通常，他们登录后将看到“标签”导航。

在选项卡导航中，我有聊天屏幕，它将在一个屏幕中呈现片段，每个片段将产生一个聊天头列表，该列表应该在单个聊天屏幕中打开。

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;

从以上代码中，我生成了“聊天屏幕”，它是选项卡导航器的一部分，并且正在加载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'
    }
});

现在，如果我单击以打开一个列表项并使用this.props.navigation.navigate（'adminSingle.js'），它不起作用，该如何解决？

我正在使用“反应导航”：“ ^ 2.6.0”

Answer 1

好像您忘记了将导航作为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 个答案: