react-native - 类声明中类型参数少于 1 个的组件

Question

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createBottomTabNavigator, createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import Event from './src/components/event/Event.js';
import Chat from './src/components/chat/Chat.js';
import Signup from "./src/components/signup/Signup.js";
import Verif1 from "./src/components/signup/Verif1.js";
import NewEvent from "./src/components/event/Newevent.js";
import EditUser from "./src/components/user/Edituser";
import NewUser from "./src/components/user/Newuser";
import io from 'socket.io-client';
import GLOBAL from "./src/lib/global";
import SplashScreen from "./src/components/splashscreen/SplashScreen";


const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

//socket.io
const socket = io(GLOBAL.BASE_URL, {
  //const socket = io(GLOBAL.BASE_URL, {
    transports: ['websocket'],
    jsonp: false
  });
console.log("socket id in App.js : ", socket.id);


socket.on('disconnect', (reason) => {
  // ...
  if (reason === 'io server disconnect') {
    // the disconnection was initiated by the server, you need to reconnect manually
    socket.connect();
  }
  // else the socket will automatically try to reconnect
});

const ChatWithSocket = (props) => (<Chat {...props} socket={socket} />)

const EventStack = {

    Event:  {
      screen: Event,
      navigationOptions: {
        title: 'Event',
      },
    },
    NewEvent: {
      screen: NewEvent,
      navigationOptions: {
        title: 'New Event',
      },
    },

    Chat: {
      screen: ChatWithSocket,
      navigationOptions: {
        title: 'Chat',
      },

    },

  };

const SignupStack = {
  Signup: {
    screen: Signup,
    navigationOptions: {
      title: 'Signup',
    },
  },
  Verif1: {
    screen: Verif1,
    navigationOptions: {
      title: 'Verify User',
    },
  },
};

const UserStack = { 
    NewUser: {
      screen: NewUser,
      navigationOptions: {
        title: 'New User',
      },
    },
    /* EditUser: {
      screen: EditUser,
      navigationOptions: {
        title: 'Edit User',
      },
    },     */

};


const bottomTabNavOptions =  {
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      console.log("Navigation : ", navigation.dangerouslyGetParent().getParam('params'));
      let iconName;
      if (routeName === 'Event') {
        iconName = `ios-information-circle${focused ? '' : '-outline'}`;
      } else if (routeName === 'User') {
        iconName = `ios-options${focused ? '' : '-outline'}`;
      }

      return <Text>Hello the world!</Text>
    },
  }),
  tabBarOptions: {
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
  },
};

class App extends React.Component {  //<<<=== this line cause error

  EventRoute = (initRoute) => {
    createStackNavigator(EventStack, {
      initialRouteName: initRoute,
    })
  };

  UserRoute = (initRoute) => {
    createStackNavigator(UserStack, {
      initialRouteName: initRoute,
    })
  };


  bottomTabScreen = () => {
    //if there is a token and user
    if (this.props.token && this.props.user) {
    return createBottomTabNavigator(
      {
        Event: {screen: this.EventRoute("Event")},
        User: {screen: this.UserRoute("User")},
      }, bottomTabNavOptions
    );
    } else  {
    return createStackNavigator(
      {
        Signup: {screen: Signup},
        Verif1: {screen: Verif1},
      }
    );
    };
  };

  createDynamicRoutes = () => {
    return createAppContainer(
      createBottomTabNavigator(this.bottomTabScreen())
    );
  };

    render() {

      const AppContainer = this.createDynamicRoutes();
      return <AppContainer />;
    }
};

const InitialNavigator = createSwitchNavigator({
  Splash: SplashScreen,
  App: App,
});
export default createAppContainer(InitialNavigator);  

但是 class App extends React.Component {...} 的声明

显示 IDE VS Code 中的错误:

Cannot use  property `Component` [1] with fewer than 1 type argument.Flow(InferError)
react.js(26, 30): [1] property `Component`
Quick Fix...
Peek Problem

根据我对 React Native 0.59 的最新文档的阅读，class App extends React.Component {...} 很好。 React导航的版本是3.9。

Answer 1

看起来像流程验证错误，向您的组件添加空 Prop 。\

type Props = {};
export default class App extends Component<Props> {
 ...
}