2

我是本机反应的新手，我正在为我的应用程序添加聊天功能。为了学习，我按照教程制作了一个独立的聊天应用程序，它运行良好。独立聊天应用但是当我尝试将它与我的项目的其余部分集成时 - 我得到的只是一个空白屏幕与我的应用程序的其余部分集成时，我检查了两者中的天才聊天版本 - 它相同 ^0.13.0 并且我检查了两者中的聊天代码 - 这正是相同的。我不明白为什么什么都看不见，我该如何解决？帮助将不胜感激！也放上package.json，以防出现版本问题

独立聊天 

import React, {Component} from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
import { db } from 'C:/Users/Suman Shaw/testCareApp/config';

let saveMessage = message => {
  db.ref('/messages').push({
    messageText: message
  });
};  

export default class giftedChat extends React.Component {
  state = {
    messages: [],
  }

  componentDidMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: 'Hi There !',
          createdAt: new Date(),
          user: {
            _id: 2,
            name: 'suman@gmail.com',
            avatar: 'https://placeimg.com/640/480/nature',
          },
        },
      ],
    })
  }

  onSend(messages = []) {
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }))
    db.ref('/messages').push({ messages });
  }

  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={messages => this.onSend(messages)}
        user={{
          _id: 1,
        }}
      />
    )
  }
}

包.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gifted-chat": "^0.13.0",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

在我的应用程序中：

class ChatPage extends React.Component {

  render() {
  return (
    <View style={styles.container}>
        <Button title="Chat room" color='#00bcd4' onPress={() => this.props.navigation.navigate('giftedChat')} /> //the same file copied from the standalone chat
    </View>
  );
}
const RootStack = createStackNavigator(
  {
    WelcomePage: WelcomePage,
    giftedChat : giftedChat, 

  }
);

export default createAppContainer(RootStack);

包.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.5",
    "@react-native-firebase/auth": "^6.3.4",
    "@react-navigation/native": "^5.0.7",
    "@react-navigation/stack": "^5.0.8",
    "expo": "~36.0.0",
    "firebase": "^7.9.3",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-dotenv": "^0.2.0",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-gifted-chat": "^0.13.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-router-flux": "^4.2.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-preset-expo": "~8.0.0",
    "expo-cli": "^3.13.1"
  },
  "private": true
}
4

0 回答 0