系统:操作系统:Linux 5.3 Ubuntu 18.04.4 LTS(Bionic Beaver)CPU:(4)x64 Intel(R)Core(TM)i5-4300U CPU @ 1.90GHz内存:378.16 MB / 7.66 GB外壳:4.4.20-/ bin / bash二进制文件:节点:12.16.1-/ usr / bin / node纱线:1.21.1-/ usr / bin / yarnnpm:6.13.4-/ usr / bin / npm守望者:4.9.0-/ usr / local / bin / watchman
SDK:
IDEs:Android Studio:3.5 AI-191.8026.42.35.5791312
npmPackages:
反应:16.9.0 => 16.9.0
本机:0.61.5 => 0.61.5
npmGlobalPackages:
react-native-git-upgrade:0.2.7
"dependencies": {
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/bottom-tabs": "^5.1.1",
"@react-navigation/native": "^5.0.9",
"@react-navigation/stack": "^5.1.1",
"prop-types": "^15.7.2",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-deprecated-custom-components": "^0.1.2",
"react-native-gesture-handler": "^1.6.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.3.0",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-swiper": "^1.6.0-rc.3",
"react-native-tab-navigator": "^0.3.4"
}
代码:
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
)
您需要安装react-native-safe-area-view
参考https://github.com/react-native-community/react-native-safe-area-view#in-bare-react-native-projects