9999啪啪片av一区二区三区,妖精视频,张雨绮被揉到高潮下不了床

createBottomTabNavigator開發(fā)指南

createBottomTabNavigator相當(dāng)于iOS里面的TabBarController，屏幕下方的標(biāo)簽欄。如圖：

createBottomTabNavigator.png

createBottomTabNavigator API

RouteConfigs(必選)：路由配置對象是從路由名稱到路由配置的映射，告訴導(dǎo)航器該路由呈現(xiàn)什么。
BottomTabNavigatorConfig(可選)：配置導(dǎo)航器的路由(如：默認(rèn)首屏，navigationOptions，paths等)樣式(如，轉(zhuǎn)場模式mode、頭部模式等)。

從createBottomTabNavigator API上可以看出createBottomTabNavigator支持通過RouteConfigs和 BottomTabNavigatorConfig兩個參數(shù)來創(chuàng)建createBottomTabNavigator導(dǎo)航器。

RouteConfigs

RouteConfigs支持三個參數(shù)screen、path以及navigationOptions；

screen(必選)：指定一個 React 組件作為屏幕的主要顯示內(nèi)容，當(dāng)這個組件被TabNavigator加載時，它會被分配一個navigation prop。
path(可選)：用來設(shè)置支持schema跳轉(zhuǎn)時使用，具體使用會在下文的有關(guān)Schema章節(jié)中講到；
navigationOptions(可選)：用以配置全局的屏幕導(dǎo)航選項(xiàng)如：title、headerRight、headerLeft等；

BottomTabNavigatorConfig

tabBarComponent：指定createBottomTabNavigator的TabBar組件，如果不指定在iOS上默認(rèn)使用TabBarBottom，在Android平臺上默認(rèn)使用TabBarTop。
- TabBarBottom與TabBarTop都是react-navigation所支持的組件，要自定義TabBar可以重寫這兩個組件也可以根據(jù)需要自己實(shí)現(xiàn)一個；
tabBarOptions: 配置TaBar下文會詳細(xì)講解；
initialRouteName : 默認(rèn)頁面組件，createBottomTabNavigator顯示的第一個頁面；
order: 定義tab順序的routeNames數(shù)組。
paths: 提供routeName到path config的映射，它覆蓋routeConfigs中設(shè)置的路徑。
backBehavior: 后退按鈕是否會導(dǎo)致標(biāo)簽切換到初始tab？如果是，則設(shè)切換到初始tab，否則什么也不做。默認(rèn)為切換到初始tab。

tabBarOptions（tab配置）

activeTintColor: 設(shè)置TabBar選中狀態(tài)下的標(biāo)簽和圖標(biāo)的顏色；
inactiveTintColor: 設(shè)置TabBar非選中狀態(tài)下的標(biāo)簽和圖標(biāo)的顏色；
showIcon: 是否展示圖標(biāo)，默認(rèn)是false；
showLabel: 是否展示標(biāo)簽，默認(rèn)是true；
upperCaseLabel - 是否使標(biāo)簽大寫，默認(rèn)為true。
tabStyle: 設(shè)置單個tab的樣式；
indicatorStyle: 設(shè)置 indicator(tab下面的那條線)的樣式；
labelStyle: 設(shè)置TabBar標(biāo)簽的樣式；
iconStyle: 設(shè)置圖標(biāo)的樣式；
style: 設(shè)置整個TabBar的樣式；
allowFontScaling: 設(shè)置TabBar標(biāo)簽是否支持縮放，默認(rèn)支持；
safeAreaInset：覆蓋<SafeAreaView>的forceInset prop，默認(rèn)是{ bottom: 'always', top: 'never' }，可選值：top | bottom | left | right ('always' | 'never')；

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    backgroundColor: 'blue',
  },
}

navigationOptions（屏幕導(dǎo)航選項(xiàng)）

createBottomTabNavigator支持的屏幕導(dǎo)航選項(xiàng)的參數(shù)有：

title: 可以用作headerTitle和tabBarLabel的備選的通用標(biāo)題。
tabBarVisible: 顯示或隱藏TabBar，默認(rèn)顯示；
tabBarIcon: 設(shè)置TabBar的圖標(biāo)；
tabBarLabel: 設(shè)置TabBar的標(biāo)簽；
tabBarOnPress: Tab被點(diǎn)擊的回調(diào)函數(shù)，它的參數(shù)是一保函一下變量的對象：
- navigation: navigation prop ；
- defaultHandler: tab按下的默認(rèn)處理程序；
tabBarButtonComponent：React組件，它包裝圖標(biāo)和標(biāo)簽并實(shí)現(xiàn)onPress。默認(rèn)情況下是TouchableWithoutFeedback的一個封裝，使其其表現(xiàn)與其它可點(diǎn)擊組件相同，tabBarButtonComponent: TouchableOpacity 將使用 TouchableOpacity 來替代；
tabBarAccessibilityLabel：選項(xiàng)卡按鈕的輔助功能標(biāo)簽。當(dāng)用戶點(diǎn)擊標(biāo)簽時，屏幕閱讀器會讀取這些信息。如果您沒有選項(xiàng)卡的標(biāo)簽，建議設(shè)置此項(xiàng)；
tabBarTestID：用于在測試中找到該選項(xiàng)卡按鈕的 ID；

【案例1】使用createBottomTabNavigator做界面導(dǎo)航、配置navigationOptions

createBottomTabNavigator

第一步：創(chuàng)建一個createBottomTabNavigator類型的導(dǎo)航器

export const AppTabNavigator = createBottomTabNavigator({
    Page1: {
        screen: Page1,
        navigationOptions: {
            tabBarLabel: 'Page1',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: 'Page2',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-people' : 'ios-people-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: 'Page3',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
}, {
    tabBarComponent: TabBarComponent,
    tabBarOptions: {
        activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
    }
});

第二步：配置navigationOptions：

TabNavigator的navigationOptions有兩個關(guān)鍵的屬性，tabBarLabel標(biāo)簽與tabBarIcon圖標(biāo)：

Page2: {
    screen: Page2,
    navigationOptions: {
        tabBarLabel: 'Page2',
        tabBarIcon: ({tintColor, focused}) => (
            <Ionicons
                name={focused ? 'ios-people' : 'ios-people-outline'}
                size={26}
                style={{color: tintColor}}
            />
        ),
    }
},

在上述代碼中使用了react-native-vector-icons的矢量圖標(biāo)作為Tab的顯示圖標(biāo)，tabBarIcon接收一個React 組件，大家可以根據(jù)需要進(jìn)行定制：

tintColor: 當(dāng)前狀態(tài)下Tab的顏色；
focused: Tab是否被選中；

第三步：界面跳轉(zhuǎn)

 const {navigation} = this.props;
 ...
 <Button
    title="跳轉(zhuǎn)到頁面2"
    onPress={() => {
        navigation.navigate("Page3",{ name: 'Devio' })
    }}
/>
 <Button
    title="Go Back"
    onPress={() => {
        navigation.goBack();
    }}
/>

頁面跳轉(zhuǎn)可分為兩步：

1. 獲取navigation：
```
const {navigation} = this.props;
```
1. 通過navigate(routeName, params, action)進(jìn)行頁面跳轉(zhuǎn)：
```
 navigation.navigate('Page2');
 navigation.navigate('Page3',{ name: 'Devio' });
```
這里在跳轉(zhuǎn)到Page3的時候傳遞了參數(shù){ name: 'Devio' }；

第四步：更新頁面Params與返回

export default class Page1 extends React.Component {
    //也可在這里定義每個頁面的導(dǎo)航屬性，這里的定義會覆蓋掉別處的定義
    // static navigationOptions = {
    //     title: 'Page1',
    // };

    render() {
        const {navigation} = this.props;
        return <View style={{flex: 1, backgroundColor: "gray",}}>
            <Text style={styles.text}>歡迎來到Page1</Text>
            <Button
                title="Go Back"
                onPress={() => {
                    navigation.goBack();
                }}
            />
            <Button
                title="改變主題色"
                onPress={() => {
                    navigation.setParams({theme:{
                        tintColor:'orange',
                        updateTime:new Date().getTime()
                    }})
                }}
            />
            <Button
                title="跳轉(zhuǎn)到頁面2"
                onPress={() => {
                    navigation.navigate("Page2")
                }}
            />
        </View>
    }
}

在上述代碼中通過：

<Button
    title="改變主題色"
    onPress={() => {
        navigation.setParams({theme:{
            tintColor:'orange',
            updateTime:new Date().getTime()
        }})
    }}
/>

更新當(dāng)前主題，你會看到當(dāng)點(diǎn)擊“改變主題色“按鈕時，TabBar的顏色也會跟著改變。

當(dāng)用戶單擊Go Back按鈕時，通過：

navigation.goBack();

實(shí)現(xiàn)了返回到默認(rèn)的Tab。

【高級案例】react-navigation的高級應(yīng)用

在使用react-navigation時往往有些需求通過簡單的配置是無法完成的，比如：

動態(tài)配置createBottomTabNavigator：官方只提供了TabNavigator中的頁面的靜態(tài)配置方式，如果TabNavigator中的頁面不固定，需要動態(tài)生成那么需要怎么做呢？
動態(tài)配置createBottomTabNavigator的樣式：通過官方的文檔是無法實(shí)現(xiàn)動態(tài)改變TabNavigator的樣式的，比如：修改顯示的文字，修改字體顏色，修改圖標(biāo)等等；
多層嵌套后路由個性化定制：createBottomTabNavigator被包裹后在TabNavigator中的頁面是無法借助navigation跳轉(zhuǎn)到外層StackNavigator中的頁面的，這種應(yīng)用場景很多，尤其是你需要定制TabNavigator的時候；
初始化傳參：如何在設(shè)置頁面的時候傳遞參數(shù)呢？

大家在學(xué)習(xí)使用React Navigation3x過程中遇到任何問題都可以在React Navigation3x的視頻教程中尋找答案哈。
另外，也可以通過最新版React Native+Redux打造高質(zhì)量上線App視頻教程學(xué)習(xí)React Navigation3x開發(fā)的更多實(shí)戰(zhàn)經(jīng)驗(yàn)和技巧，以及優(yōu)化思路。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

『React Navigation 3x系列教程』createBottomTabNavigator開發(fā)指南