javascript - 反应导航 - createBottomTabNavigator 不工作
问题描述
你好,我正在制作一个带有 expo 的原生应用程序。以下是我的 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',
},
});
以下是我的 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"
}
}
该应用程序正在运行,没有任何错误,但它不显示底部导航选项卡!我也检查了官方文档中的语法,我担心这可能是由于 react-navigation 的版本。任何帮助,将不胜感激。
以下是我的welcomescreen 组件文件:
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 组件也相同,只是名称的更改。
解决方案
版本不是问题。问题在于自定义StyleSheet
和<View/>
组件
如果您想在 uer 应用程序中尝试 package.json 是:
{
"dependencies": {
"@expo/vector-icons": "6.2.1",
"react-native-elements": "0.18.5",
"react-navigation": "^2.6.2"
}
}
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',
},
});
推荐阅读
- javascript - 将外部js文件导入角度
- ios - 我无法在 CollectionView 中显示 3 个单元格
- python - 重复提取部分数组
- angular - 来自输入的角度搜索数组值
- html - 如何使用 html 和 twitter-bootstrap 像 instagram 一样进行注册和登录页面
- javascript - 递增日期在 javascript 中无法按预期工作
- python - 如何通过使用python函数从文本文件中导入坐标来计算距离
- python - 如何修复 Python 中的“您必须使用 dtype float 和 shape [?,1,680,1] 为占位符张量“Placeholder_2”提供值?
- java - Dagger中的单例方法
- android-studio - 在 android studio 模拟器上运行 react native 应用程序