Question

我是React Native的新手。我正在开发一个简单的应用程序，但我无法显示Tabs组件。

index.ios.js：

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Index from './app/Index';

export default class App1 extends Component {
  render() {
    return (
      <Index />
    );
  }
}

AppRegistry.registerComponent('App1', () => App1);

应用程序/ Index.js：

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Tabs from './Router';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
  },
});

export default class Index extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View><Tabs /></View>
      </View>
    );
  }
}

app / Router.js（标签组件）：

import React from 'react';
import { TabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import Calendar from './screens/Calendar';
import RecycleLocation from './screens/RecycleLocation';

const Tabs = TabNavigator({
  Calendar: {
    screen: Calendar,
    navigationOptions: {
      tabBar: {
        icon: ({ tintColor }) => <Icon type="font-awesome" name="calendar" size={24} color={tintColor} />,
      },
    },
  },
  RecycleLocation: {
    screen: RecycleLocation,
    navigationOptions: {
      tabBar: {
        label: 'Recycle Location',
        icon: ({ tintColor }) => <Icon type="font-awesome" name="map" size={24} color={tintColor} />,
      },
    },
  },
});

export default Tabs;

在app / Index.js中，如果我这样做，它可以正常工作：

export default class Index extends Component {
  render() {
    return (
      <Tabs />
    );
  }
}

知道我在这里做错了吗？

Answer 1

通过删除Tabs组件周围的View元素来管理它以使其工作。

export default class Index extends Component {
  render() {
    return (
      // <Tabs />
      <View style={styles.container}>
        <View><StatusBarBackground /></View>
        <Tabs />
      </View>
    );
  }
}

仍然困惑为什么Tabs无法使用它周围的View元素。

反应本机无法获得组件显示

1 个答案: