React-native给出警告：函数作为React子函数无效。＆＃39;

Question

我刚开始反应原生。

当我尝试使用来自＆＃39; react-navigatioin-tabs＆＃39;的createMaterialBottomTabNavigator时，我收到了这个警告信息。我不知道哪个部分会从代码中产生麻烦 也许它误用了什么......

你能帮帮我吗？

以下代码..

import { createMaterialBottomTabNavigator
} from 'react-navigation-tabs';
import Home from '../Screens/HomeScreen/Home'
import Maps from '../Screens/HomeScreen/Maps'
import My from '../Screens/HomeScreen/My'
import Subjects from '../Screens/HomeScreen/Subjects'

const BottomTabNavigation = createMaterialBottomTabNavigator(
  {
    Home: { screen: Home },
    Maps: { screen: Maps },
    My: { screen: My },
    Subjects: { screen: Subjects },
  },
  {
    initialRouteName: 'Home',
    activeTintColor: '#F44336',
  }
);

export default BottomTabNavigation

BottomTabNavigation.js

import React, { Component } from 'react';
import {
  NativeModules,
  Text,
  View,
} from 'react-native';
import styles from '../../Styles/HomeScreen/styles';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

class Home extends Component {
  static navigationOptions = {
    tabBarColor: '#3F51B5',
    tabBarIcon: <MaterialIcons
      style={{ backgroundColor: 'transparent' }}
      name='photo-album'
      color='red'
      size={24}
    />,
  };

  render(){
    return (
      <View style={styles.container}>
        <Text>Home</Text>
      </View>
    );
  }
}
export default Home;

Home.js

Answer 1

问题在于tabBarIcon，它被定义为一个返回另一个函数的函数。所以你也需要调用那个内部函数（ tabBarIcon（＆＃39; photo-album＆＃39;）（））。还有一件事：你的tintColor变量从哪里提取？

我会更改您的代码，并执行以下操作：

const tabBarIcon = (name, tintColor) => (
  <MaterialIcons
    style={{ backgroundColor: 'transparent' }}
    name={name}
    color={tintColor}
    size={24}
  />
);

class Home extends React.Component {
  static navigationOptions = {
    tabBarColor: '#3F51B5',
    tabBarIcon: tabBarIcon('photo-album', 'SOME_COLOR'),
    title: 'good job!',
  };
  render() { ... }
}

Answer 2

将import * as React from 'react';更改为

import React, { Component } from 'react';


export default class Home extends Component {
}

希望有帮助