react-native - TopTabNavigator 添加自定义图标

Question

我正在学习教程，但遇到了一点困难。

我正在尝试在 React Native 选项卡导航器中添加自定义图标，但我并不幸运，希望其他成员能够引导我走向正确的方向。

import React from 'react';
import { createMaterialTopTabNavigator, Image} from 'react-navigation';
import FoldersList from '../screens/FoldersList';

const Routes = {
   Home: {
       screen: (props) => <FoldersList {...props} tabIndex={0}/>,
       navigationOptions: {
           title: 'Home'
       }
   },
   MyNewTab: {
       screen: (props) => <FoldersList {...props} tabIndex={1} createFolderTitle='Create new tab folder' />,
       navigationOptions: {
           title: 'MyNewTab'
       }
   },
   MyThirdTab: {
       screen: (props) => <FoldersList {...props} tabIndex={2} createFolderTitle='Create third tab folder'/>,
       navigationOptions: {
           tabBarIcon: ({ tintColor }) => {
               return (<Image
                   style={{ width: 50, height: 50 }}
                   source={{ require: "../../images/AddFolder.png" }}/>);}
       }
   },
};

const routeConfig = {
   swipeEnabled: false,
   tabBarOptions: {
       style: {
           backgroundColor: '#013a65',
         },
           renderIndicator: () => null, // Indicatorline under tabbar
           activeTintColor:'red',
           inactiveTintColor:'#ffffff',
           }, 
           }, 
     };

export default TabNavigator = createMaterialTopTabNavigator({
   ...Routes
}, routeConfig);

Answer 1

您好，这是一个简单的代码:

更新

class MyHomeScreen extends React.Component {
 static navigationOptions = {
   tabBarLabel: 'Home',
  // Note: By default the icon is only shown on iOS. Search the showIcon 
   option below.
     tabBarIcon: ({ tintColor }) => (
     <Image
       source={require('./chats-icon.png')}
       style={[styles.icon, {tintColor: tintColor}]}
     />
   ),
 };

render() {
 return (
  <Button
    onPress={() => this.props.navigation.navigate('Notifications')}
    title="Go to notifications"
  />
  );
 }
}

class MyNotificationsScreen extends React.Component {
   static navigationOptions = {
   tabBarLabel: 'Notifications',
   tabBarIcon: ({ tintColor }) => (
   <Image
      source={require('./notif-icon.png')}
      style={[styles.icon, {tintColor: tintColor}]}
   />
  ),
 };

render() {
 return (
   <Button
     onPress={() => this.props.navigation.goBack()}
     title="Go back home"
   />
  );
 }
}

const styles = StyleSheet.create({
  icon: {
    width: 26,
   height: 26,
  },
 });

const MyApp = TabNavigator({
   Home: {
    screen: MyHomeScreen,
   },
  Notifications: {
   screen: MyNotificationsScreen,
  },
  }, {
    tabBarPosition: 'top',
    animationEnabled: true,
    tabBarOptions: {
    activeTintColor: '#e91e63',
  },
 });

根据文档，showIcon 属性在 Android 上设置为 false ( https://web.archive.org/web/20171015002750/https://reactnavigation.org/docs/navigators/tab#tabBarOptions-for-TabBarTop-default-tab-bar-on-Android )。

如果上述代码不起作用，请按照以下步骤操作:

const MyApp = TabNavigator({
   Displayed: {
     screen: MyHomeScreen,
     navigationOptions: {
        title: 'Favorites',
        tabBar: {
           icon: ({tintColor}) => (<Image
           source={require('./chats-icon.png')}
           style={{width: 26, height: 26, tintColor: tintColor}}
         />)
        },
      },
    },
    ...

或

class MyHomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Foo Bar',
        tabBar: {
            icon: ({ tintColor }) => (
              <Image
                source={require('./chats-icon.png')}
                style={{width: 26, height: 26, tintColor: tintColor}}
              />
            ),
        }
      };
 ...

我真的希望一些代码可以帮助你......