我创建了一个基本的react-native应用程序,它包含一些用于呈现不同屏幕的按钮 . 用户登录后,我会渲染一个TabNavigator项,但由于某种原因,没有选项卡出现,屏幕完全空白 . 我把我的代码与其他人比较,没有任何运气 . 有什么建议?
import React from 'react';
import { StyleSheet, Text, View, Image, Button, ImageBackground } from 'react-native';
import { TabNavigator } from 'react-navigation';
import {Electric} from './Sub-bills/Electric';
import {Web} from './Sub-bills/WebBill';
import {Water} from './Sub-bills/Water';
import {OtherBills} from './Sub-bills/OtherBills';
import {Personal} from './Sub-bills/Personal';
export const Tabs = TabNavigator(
{
Electric: {
screen: Electric,
navigationOptions: {
tabBarLabel: 'Electric'
}
},
Web: {
screen: Web,
navigationOptions: {
tabBarLabel: 'Web'
}
},
Water: {
screen: Water,
navigationOptions: {
tabBarLabel: 'Water'
}
},
OtherBills: {
screen: OtherBills,
navigationOptions: {
tabBarLabel: 'Other'
}
},
Personal: {
screen: Personal,
navigationOptions: {
tabBarLabel: 'Personal'
}
}
},
);
export class HouseholdBills extends React.Component{
render(){
return (
<Tabs />
);
}
}
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute'
},
});
按下按钮即可呈现组件
1 回答
我使用以下作为Tab Nav的额外配置 . 你可能可以剥掉一些东西,但最重要的是至少定义顺序 .