[英]react-navigation - createBottomTabNavigator not working
Hello I am making a react native app with expo.你好,我正在制作一个带有 expo 的本机应用程序。 Following is my app.js file:以下是我的 app.js 文件:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createBottomTabNavigator} from 'react-navigation';
import WelcomeScreen from "./screens/WelcomeScreen";
import AuthScreen from "./screens/AuthScreen";
export default class App extends React.Component {
render() {
const MainNavigator = createBottomTabNavigator({
Welcome: WelcomeScreen,
Auth: AuthScreen
});
return (
<View style={styles.container}>
<MainNavigator/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
and following is my package.json file:以下是我的 package.json 文件:
{
"main": "node_modules/expo/AppEntry.js",
"private": true,
"dependencies": {
"expo": "^28.0.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
"react-navigation": "^2.6.2"
}
}
The app is running without any errors but it does not display the bottom navigation tab!该应用程序运行没有任何错误,但它不显示底部导航选项卡! I have checked the syntax from the official documentation as well and i fear it may be due to version of react-navigation.我也检查了官方文档中的语法,我担心这可能是由于 react-navigation 的版本。 Any help would be appreciated.任何帮助,将不胜感激。
Following is my welcomescreen component file:以下是我的欢迎屏幕组件文件:
import React, {Component} from 'react';
import {Text, View} from "react-native";
class WelcomeScreen extends Component{
render(){
return(
<View>
<Text>
Hello this is working!
</Text>
</View>
);
}
}
export default WelcomeScreen;
auth component is also same except the change of name.除了名称更改外,auth 组件也相同。
Version is not the issue.版本不是问题。 The issue is with the custom StyleSheet
and <View/>
Component问题在于自定义StyleSheet
和<View/>
组件
You can View the edited app here您可以在此处查看编辑的应用程序
In case u want to try in uer app package.json is:如果你想在 uer app package.json 中尝试是:
{
"dependencies": {
"@expo/vector-icons": "6.2.1",
"react-native-elements": "0.18.5",
"react-navigation": "^2.6.2"
}
}
and App.js is:而 App.js 是:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation'; // Version can be specified in package.json
class AuthScreen extends React.Component{
render(){
return(
<View>
<Text>
AuthScreen Works!
</Text>
</View>
);
}
}
class WelcomeScreen extends React.Component{
render(){
return(
<View>
<Text>
Hello this is working!
</Text>
</View>
);
}
}
export default class App extends React.Component {
render() {
const MainNavigator = createBottomTabNavigator({
Auth: { screen: AuthScreen },
Welcome: { screen: WelcomeScreen },
});
// return (
// <View style={styles.container}>
// <MainNavigator/>
// </View>
// );
return <MainNavigator/>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
尝试将堆栈导航器作为您的第一个屏幕,然后尝试加载欢迎屏幕和其他屏幕作为底部选项卡导航器,我在我的许多应用程序中都使用了这种结构,试试这个https://github.com/davekedar/React-Navigation -V2-Authflow
我通过升级到解决了这个问题
"react-navigation": "^2.13.0"
Encountered this today with "react-navigation": "^4.3.9"
.今天遇到了"react-navigation": "^4.3.9"
。
Fixed by setting <View style={{ flex: 1 }}>
instead of just <View>
.通过设置<View style={{ flex: 1 }}>
而不是<View>
来修复。 This problem does not occur if you wrap the navigator in something other than <View>
(ie <Fragment>
).如果您将导航器包装在<View>
(即<Fragment>
)以外的其他内容中,则不会发生此问题。
https://github.com/react-navigation/react-navigation/issues/8449 https://github.com/react-navigation/react-navigation/issues/8449
https://reactnavigation.org/docs/troubleshooting/#nothing-is-visible-on-the-screen-after-adding-a-view https://reactnavigation.org/docs/troubleshooting/#nothing-is-visible-on-the-screen-after-adding-a-view
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.