ReactNative-導航條(StackNavigator)與標籤欄(TabNavigator)組合
阿新 • • 發佈:2018-12-06
直接看程式碼比較清晰
1.基本目錄結構
2.App.js檔案
3.YNMain.js檔案
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, {Component} from 'react'; import { StyleSheet} from 'react-native'; //匯入外部檔案 import NavigatorTextOne from './NavigatorTextOne'; import YNTestButtomNavigator from './YNTestButtomNavigator'; import { createStackNavigator, createAppContainer} from 'react-navigation'; //建立StackNavigator const YNMain = createStackNavigator({ Home:{ screen:YNTestButtomNavigator, }, NavigatorTextOne:{ screen:NavigatorTextOne, }, }, { initialRouteName: 'Home', } ); export default createAppContainer(YNMain);
4.YNTestButtomNavigation.js檔案
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View, Image} from 'react-native'; //匯入外包檔案 import YNHome from '../Home/YNHome'; import YNShop from '../Shop/YNShop'; import YNMine from '../Mine/YNMine'; import YNMore from '../More/YNMore'; import {createAppContainer, createBottomTabNavigator} from 'react-navigation'; export default YNTestButtomNavigator = createBottomTabNavigator({ Home:{ screen:YNHome, navigationOptions:{ //tab 的屬性的屬性 tabBarLabel:'首頁', tabBarIcon:({tintColor, focused}) => ( focused ? <Image source={{uri:'icon_tabbar_homepage_selected'}} style={styles.iconStyle} /> : <Image source={{uri:'icon_tabbar_homepage'}} style={styles.iconStyle} /> ) } }, YNShop:{ screen:YNShop, navigationOptions:{ //tab 的屬性 tabBarLabel:'商店', tabBarIcon:({tintColor, focused}) =>( focused ? <Image source={{uri:'icon_tabbar_merchant_selected'}} style={styles.iconStyle} /> : <Image source={{uri:'icon_tabbar_merchant_normal'}} style={styles.iconStyle} /> ) } }, YNMine:{ screen:YNMine, navigationOptions:{ //tab 屬性 tabBarLabel:'我的', tabBarIcon:({tintColor, focused}) =>( focused ? <Image source={{uri:'icon_tabbar_mine_selected'}} style={styles.iconStyle} /> : <Image source={{uri:'icon_tabbar_mine'}} style={styles.iconStyle} /> ) } }, YNMore:{ screen:YNMore, navigationOptions:{ //tab 屬性 tabBarLabel:'更多', tabBarIcon:({tintColor, focused}) =>( focused ? <Image source={{uri:'icon_tabbar_misc_selected'}} style={styles.iconStyle} /> : <Image source={{uri:'icon_tabbar_misc'}} style={styles.iconStyle} /> ) } }, }, { //設定TabNavigator的位置 tabBarPosition: 'bottom', //是否在更改標籤時顯示動畫 animationEnabled: true, //是否允許在標籤之間進行滑動 swipeEnabled: true, //按 back 鍵是否跳轉到第一個Tab(首頁), none 為不跳轉 backBehavior: "none", //進入App的首頁 initialRouteName:'Home', //設定Tab標籤的屬性 tabBarOptions: { //Android屬性 upperCaseLabel: false,//是否使標籤大寫,預設為true //共有屬性 showIcon: true,//是否顯示圖示,預設關閉 showLabel: true,//是否顯示label,預設開啟 activeTintColor: 'orange',//label和icon的前景色 活躍狀態下(選中) inactiveTintColor: 'gray',//label和icon的前景色 活躍狀態下(未選中) }, navigationOptions: ({navigation}) => ({ title: navigation.state.routeName, headerStyle: {backgroundColor: '#fff',}, headerTintColor: color.activeBarText, headerTitleStyle: {fontWeight: 'bold',}, }), }); //導航條上的內容展示 YNTestButtomNavigator.navigationOptions = ({navigation}) => { let {routeName} = navigation.state.routes[navigation.state.index]; // You can do whatever you like here to pick the title based on the route name let headerTitle = routeName; return { headerTitle, }; }; const styles = StyleSheet.create({ iconStyle:{ width:Platform.OS === 'ios' ? 30 :25, height:Platform.OS === 'ios' ? 30 :25 }, });
5.YNHome.js檔案
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View, Button} from 'react-native'; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', }); class YNHome extends React.Component { render() { //導航條設定 const {navigate} = this.props.navigation; return ( <View style={styles.container}> <Text style={styles.welcome}>首nnnnn頁</Text> <Button title="Go to NavigatorTextOne" onPress={() => this.props.navigation.navigate('NavigatorTextOne', {name: '這是傳遞到NavigatorThree頁面的引數Name:nihao',title: '需要傳遞的引數bioati'})} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); export {YNHome as default};
6. NavigatorTextOne.js檔案
import React, {Component} from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
class NavigatorTextOne extends React.Component{
static navigationOptions = {
headerTitle:'首頁iiiii'
}
render(){
const {state} = this.props.navigation;
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{state.params.name}</Text>
</View>
);
}
}
export {NavigatorTextOne as default};
7.YNMine.js檔案
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
class YNMine extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>我的</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
export {YNMine as default};
8.YNMore.js檔案
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
class YNMore extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>更多</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
export {YNMore as default};
9.YNShop.js檔案
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
class YNShop extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>商家</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
export {YNShop as default};
效果圖: