javascript - 我创建的组件选项卡导航器未显示在主屏幕上
问题描述
我不知道为什么,但是 tabnavigator 和 app drawer navigator 不起作用,我找不到问题所在
AppDrawerNavigator.js 用于抽屉导航,我对这段代码中的 HomeScreen 有疑问
import * as React from 'react';
import { createDrawerNavigator } from 'react-navigation-drawer';
import CustomSideBarMenu from './CustomSideBarMenu';
import { TabNavigator } from './TabNavigator';
import SettingsScreen from '../screens/SettingsScreen';
import ContactScreen from '../screens/ContactScreen';
import HomeScreen from '../screens/HomeScreen';
export const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: TabNavigator
},
ContactUs: {
screen: ContactScreen
},
Settings: {
screen: SettingsScreen
},
},
{
contentComponent: CustomSideBarMenu
},
{
initialRouteName: 'Home'
},
)
AppStackNavigator.js 用于堆栈导航,我为堆栈导航创建了它,我对此组件没有疑问
import * as React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../screens/HomeScreen';
import DonateScreen from '../screens/DonateScreen';
import ChatScreen from '../screens/ChatScreen';
import CleaningScreen from '../screens/CleaningScreen';
export const AppStackNavigator = createStackNavigator({
Home: {screen: HomeScreen, navigationOptions: { headerShown: false }},
DonateScreen: {screen: DonateScreen, navigationOptions: { headerShown: false }},
ChatScreen: {screen: ChatScreen, navigationOptions: { headerShown: false }},
CleaningScreen: {screen: CleaningScreen, navigationOptions: { headerShown: false }},
},
{
initialRouteName: 'Home'
}
)
CustomSideBarMenu.js 用于我的自定义抽屉导航器
import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { DrawerItems } from 'react-navigation-drawer';
import firebase from 'firebase';
import { Icon } from 'react-icons';
import db from '../config';
export default class CustomSideBarMenu extends React.Component {
render() {
return(
<View style = {{ flex: 1 }}>
<DrawerItems {...this.props}/>
<View style = {{ flex: 1, justifyContent: 'flex-end', paddingBottom: 30, }}>
<TouchableOpacity style = {{ justifyContent: 'center', padding: 10, height: 30, width: '100%' }}
onPress = {()=> {
this.props.navigation.navigate('LoginScreen')
firebase.auth.signOut()
}}>
<Icon
name='fontawesome|poweroff'
size={25}
color='#042'
style={{width: 10, height: 10,}}/>
<Text>Logout</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
TabNavigator.js 用于标签导航
import * as React from 'react';
import { View, Image } from 'react-native';
import { Icon } from 'react-icons';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import HomeScreen from '../screens/HomeScreen';
import DonateScreen from '../screens/DonateScreen';
import ChatScreen from '../screens/ChatScreen';
import { AppStackNavigator } from '../components/AppStackNavigator';
export const TabNavigator = createBottomTabNavigator(
{
Home: {
screen: AppStackNavigator,
navigationOptions: {
tabBarIcon: (
<Icon
name="fontawesome|home"
size={25}
color="#042"
style={{ width: 10, height: 10 }}
/>
),
tabBarLabel: 'Home',
},
},
Chat: {
screen: ChatScreen,
navigationOptions: {
tabBarIcon: (
<Image
source={require('../assets/chat.png')}
style={{ width: 10, height: 10 }}
/>
),
tabBarLabel: 'Chat',
},
},
Donate: {
screen: DonateScreen,
navigationOptions: {
tabBarIcon: (
<Image
source={require('../assets/donate.png')}
style={{ width: 10, height: 10 }}
/>
),
tabBarLabel: 'Donate',
},
},
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: () => {
const routeName = navigation.state.routeName;
if (routeName === 'Home') {
return (
<Icon
name="fontawesome|home"
size={25}
color="#042"
style={{ width: 10, height: 10 }}
/>
);
}
if (routeName === 'Chat') {
return (
<Image
source={require('../assets/chat.png')}
style={{ width: 10, height: 10 }}
/>
);
}
if (routeName === 'Donate') {
return (
<Image
source={require('../assets/donate.png')}
style={{ width: 10, height: 10 }}
/>
);
}
},
}),
}
);
HomeScreen.js,如果你愿意的话
import * as React from 'react';
import { View } from 'react-native';
export default class HomeScreen extends React.Component {
render() {
return(
<View>HomeScreen</View>
);
}
}
应用程序.js
import * as React from 'react';
import { View } from 'react-native';
import LoginScreen from './screens/LoginScreen';
import SignInScreen from './screens/SignInScreen';
import SignUpScreen from './screens/SignUpScreen';
import HomeScreen from './screens/HomeScreen';
import ForgotPasswordScreen from './screens/ForgotPasswordScreen';
import { AppDrawerNavigator } from './components/AppDrawerNavigator';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import { TabNavigator } from './components/TabNavigator';
export default class App extends React.Component {
render() {
return(
<View>
<AppContainer />
</View>
);
}
}
const switchNavigator = createSwitchNavigator({
LoginScreen: { screen: LoginScreen },
SignInScreen: { screen: SignInScreen },
SignUpScreen: { screen: SignUpScreen },
HomeScreen: { screen: HomeScreen },
ForgotPasswordScreen: { screen: ForgotPasswordScreen },
AppDrawerNavigator: { screen: AppDrawerNavigator },
TabNavigator: { screen: TabNavigator },
})
var AppContainer = createAppContainer(switchNavigator)
请尝试解决此错误
解决方案
推荐阅读
- python - 找到一个变量的最大值和最小值并找到对应的值
- r - 如何在R中的同一数据框中合并2列
- android - 如何从另一个类更新片段的用户界面?
- css - 如何在现有的圆形边框周围创建多个边框
- authentication - 带有 IAuthenticationSchemeProvider 的 IdentityServer4 的动态方案 SAML 2.0
- javascript - 这是有效的自动分号插入吗?
- php - 使用公平槽策略从队列中获取下一个任务
- java - Spring 中具有服务器端处理的 JQuery DataTables(使用 Java 和 Thymeleaf)
- ios - 一些 gif 占用了太多内存
- javascript - 如何检查用户是否已登录并更改 routerlink 值