此选项卡不显示,您可以帮我吗,请问我需要将显示选项卡导航到我的应用程序吗 我想正常显示该屏幕,因为它似乎不出现,请帮忙,因为我遇到麻烦
这些是应用程序中使用的所有页面,请参阅 这是package.json
{
"name": "alasma3y",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-elements": "^0.19.1",
"react-native-vector-icons": "^6.0.2",
"react-navigation": "^2.18.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"babel-preset-react-native": "4.0.1",
"jest": "23.6.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
这是屏幕android
这是主屏幕
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
export default class HomeScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text>الهوم سكرين</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
这是坐屏
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
export default class SittingScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text>Sitting</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
这是路线屏幕
import React from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import {Icon} from 'react-native-elements';
import HomeScreen from './pages/Home';
import SittingScreen from './pages/Sitting';
import Colors from './pages/colors';
export default TabNavigator(
{
Home: { screen: HomeScreen },
Settings: { screen: SittingScreen },
},
{
navigationOptions:({ navigation }) => ({
tabBarIcon:({focused , tintColor}) => {
const {routeName} = navigation.state;
let iconName;
if(routeName === 'Home'){
iconName = `ios-home${focused ? '':'-outline'}`
}else if(routeName === 'Settings'){
iconName = `ios-add-circle${focused ? '':'-outline'}`
}
return <Icon type='ionicon' name={iconName} color={tintColor} size={25} />
}
}),
tabBarOptions:{
activeTintColor: Colors.red,
inactiveTintColor: Colors.gray,
}
}
);