[英]how to use navigation.js in App.js in react native
我按照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>
);
}
}
但這給了我一個空白的屏幕。 我怎樣才能解決這個問題 ?
您需要在App.js
內的View
添加樣式。如果將其彈性設置為1,它將擴展為覆蓋可用空間。
您還可以通過以下方式關閉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>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.