Question

我想使用onPointerDown库在我的react-native应用中显示标签栏。我已经尝试过example provided in the documentation中的代码。但是，当我在iOS模拟器上运行代码时，屏幕似乎空白，无法加载标签栏。

到目前为止，这是我的代码，

TabNavigator.js

react-navigation

App.js

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {  
    initialRouteName: "Home"
  }  
);

export default createAppContainer(TabNavigator);

Answer 1

看看App.js代码，您忘了在视图中放置flex：1了，这是react-navigation在其文档中提到的常见错误之一。

 const App = () => {
      return (
       <View style={ { flex:1} }>
         <TabNavigator />
       </View>
      );
    };

来源：https://reactnavigation.org/docs/en/common-mistakes.html#wrapping-appcontainer-in-a-view-without-flex

无法从反应导航获得标签栏

1 个答案: