TabNavigator如何在React Native中实现

Question

我想在反应原生中实现tab navigator。我从中获取代码的链接是      https://reactnavigation.org/docs/navigators/tab 问题是，当我运行代码时，我得到错误500类型我也在最后附加错误的图片.Plz解决问题，如果任何人知道它的代码是....

import React from 'react';
import {
  AppRegistry,
  Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
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,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});
AppRegistry.registerComponent('TabNavigator', () => MyApp);

当我运行此代码时，我收到错误

即使我在那个时候使用简单的堆栈导航器我也会得到同样的错误 我从这个链接得到的堆栈导航器代码

https://reactnavigation.org/docs/intro/

Answer 1

该错误告诉您无法找到本地图像。 有两种选择：

1. 创建chats-icon.png和notif-icon.png并将它们放在您复制内容的文件所在的目录中。

2. 将source={require('./chats-icon.png')}和source={require('./chats-icon.png')}替换为source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}以使用示例远程图像。

这应该消除500错误，让你继续工作。