我按照https://reactnavigation.org/docs/en/tab-based-navigation.html的说明在我的应用程序中创建导航。
这是我的Navigation.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: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
});
const TabNav = createAppContainer(TabNavigator);
export default TabNav;
我想在我的App.js文件中导入它并将其用作导航。这是我的App.js文件
import React from 'react';
import {Text,View,Button} from 'react-native';
import TabNav from './components/CustomerDashboard/Navigation';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View>
<TabNav></TabNav>
</View>
);
}
}
但是这给了我一个空的白色屏幕。我怎样才能解决这个问题 ?
你需要在你的View
中为你的App.js
添加一个样式如果你给它一个1的flex它将扩展以覆盖可用空间。
您还可以通过以下方式关闭TabNav
组件:
<TabNav />
而不是使用<TabNav></TabNav>
这是我如何更新你的App.js
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View style={{flex: 1}}>
<TabNav />
</View>
);
}
}