最近自学的react native 其中的路由跳转很是头痛,纠结了好久,找了各种视频资料,网上朋友发布的相关的技术难题,好不容易才整理好,createStackNavigator和createBottomTabNavigator 混合使用就要先建立一个底部导航器,然后创建一个新的Stack,将底部导航器也创建。
简单的来说createStackNavigator是专门来创建一面堆栈的在需要使用的时候才能访问(比如:this.props.navigation
.navigate
('Details');所以要将所有的导航都是用createStackNavigator来创建出来!这样才合理,说的不怎么专业呀!
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {
ActivityIndicator,
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native'
import { createStackNavigator, createAppContainer,createBottomTabNavigator } from "react-navigation"
import Ionicons from 'react-native-vector-icons/Feather';
// 创建Tab底部组将
// 引入组件
import HomeScreen from './src/pages/Home'
import ShoppingScreen from "./src/pages/Shopping"
import DetailsScreen from "./src/pages/Details"
class CartScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>CartScreen!</Text>
</View>
);
}
}
class FindScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>FindScreen!</Text>
</View>
);
}
}
class UserScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>UserScreen!</Text>
</View>
);
}
}
//创建底部导航createBottomTabNavigator
const bottomTabNavigator = createBottomTabNavigator(
{
Home: HomeScreen,
Shopping: ShoppingScreen,
Cart:CartScreen,
Find:FindScreen,
User:UserScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = 'home';
}
if (routeName === 'Shopping') {
iconName = "shopping-bag";
}
if (routeName === 'Cart') {
iconName = "shopping-cart";
}
if (routeName === 'Find') {
iconName = "file";
}
if (routeName === 'User') {
iconName = "user";
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'rgb(4,127,116)',
inactiveTintColor: 'gray',
},
}
);
//创建全局导航器createStackNavigator
const AppStack = createStackNavigator({
bottomTabNavigator:{
screen : bottomTabNavigator,
navigationOptions:{
header :null
}
},
//全局的stack
Details:{
screen : DetailsScreen,
navigationOptions:{
title :"This is the details"
}
},
initialRouteName:'bottomTabNavigator'
})
const AppStackContainer = createAppContainer(AppStack);
export default class App extends Component{
render() {
return (
<AppStackContainer />
);
}
}