双乳奶水饱满少妇呻吟免费看,当着夫的面被夫上司玩弄 ,777亚洲精品乱码久久久久久

官網文檔：https://reactnavigation.org/docs/zh-Hans/getting-started.html

1、安裝react-navigation

yarn add react-navigation
# or with npm
# npm install --save react-navigation

2、安裝 react-native-gesture-handler。如果你使用 Expo，就什么都不需要做，他已經包含在 SDK 中了

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

Link 所有的原生依賴

react-native link react-native-gesture-handler

iOS 啥都不用做

為了完成 react-native-gesture-handler在 Android 上的安裝，請確保在 MainActivity.java 上完成如下修改：

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 
public class MainActivity extends ReactActivity {
 
    ...
 
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

頂部導航

import { createStackNavigator, createAppContainer } from 'react-navigation'
 
const RootStack = createStackNavigator({})
 
const AppContainer = createAppContainer(RootStack); //與2.x不同，需要用到createAppContainer
 
export default class Navigation extends Component {
    render() {
        return (
            <AppContainer/> //2.x返回的是 <RootStack/>
        )
    }
}

頭部導航欄樣式屬性

路由的選項：

path：路由中設置的路徑的覆蓋映射配置
initialRouteName：設置 stack navigator 的默認頁面，必須是路由配置中的某一個
initialRouteParams：初始路由參數
defaultNavigationOptions：用于屏幕的默認導航選項

視覺選項：

mode：定義渲染和轉換的樣式
card：使用標準的 iOS 和 Android 屏幕轉換，這是默認設置
modal：iOS獨有的使屏幕從底部畫出，在 Android 上無效
headerMode：返回上級頁面時動畫效果
float：呈現一個位于頂部的單個頁眉, 并在屏幕被更改時進行動畫顯示，這是 iOS 上常見的模式
screen：每個屏幕都有一個標頭, 并且頁眉隨屏幕一起淡入和淡出，這是 Android 的常見模式
none：無動畫
用于導航器內部頁面的navigationOptions:
header：可以設置一些導航的屬性，如果隱藏頂部導航欄只要將這個屬性設置為null
headerTitle：設置導航欄標題
headerBackImage：在標題的后退按鈕中顯示自定義圖片
headerBackTitle：設置跳轉頁面左側返回箭頭后面的文字，默認是上一個頁面的標題?？梢宰远x，也可以設置為null
headerTruncatedBackTitle：設置當上個頁面標題不符合返回箭頭后的文字時，默認改成"返回"
headerRight：在標題欄右側展示的 React 組件
headerLeft：在標題欄左側展示的 React 組件
headerStyle：設置導航條的樣式。背景色，寬高等
headerTitleStyle：設置導航欄文字樣式
headerBackTitleStyle：設置導航欄‘返回’文字樣式
headerLeftContainerStyle：自定義 headerLeft 組件容器的樣式，例如，增加 padding
headerRightContainerStyle：自定義 headerRight 組件容器的樣式，例如，增加 padding
headerTitleContainerStyle：自定義 headerTitle 組件容器的樣式，例如，增加 padding
headerTintColor：設置導航欄顏色
headerPressColorAndroid：安卓獨有的設置顏色紋理，需要安卓版本大于5.0
headerTransparent：標頭背景是否透明
headerBackground：將其與 headerTransparent 一起使用, 以提供要在標頭背景下呈現的組件
gesturesEnabled：是否可以使用手勢關閉此頁面，iOS默認支持，安卓默認關閉

底部導航樣式屬性

initialRouteName：第一次加載時初始選項卡路由的 routeName
order：定義選項卡順序的 routeNames 數組
tabBarOptions

activeTintColor：標簽和圖標選中顏色
activeBackgroundColor：導航選中背景色
inactiveTintColor：標簽和圖標未選中顏色
inactiveBackgroundColor：導航未選中背景色
showIcon：是否顯示 Tab 的圖標,默認不顯示
style：選項卡欄的樣式對象
labelStyle：選項卡標簽的樣式對象
tabStyle：選項卡的樣式對象

import React, { Component } from 'react'
 
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation'
 
import Home from './Home'
import Mine from './Mine'
 
const StackNavigator = createStackNavigator(
    {
        Home,
        Mine,
    },
    {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
            headerStyle: {
                // backgroundColor: '#f4511e',
            },
            headerBackTitle: null,
            // headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            header: null
        }
    }
)
const HomeStack = createStackNavigator({Home});
const MineStack = createStackNavigator({Mine});
 
const BottomTabNavigator = createBottomTabNavigator(
    {
        Home,
        Mine,
    },
    {
        initialRouteName: 'Home', //第一次加載時初始選項卡路由的 routeName
        order: ['Mine','Home'], //定義選項卡順序的 routeNames 數組
        tabBarOptions: {
            activeTintColor: 'red',//標簽和圖標選中顏色
            activeBackgroundColor: 'yellow',//導航選中背景色
            inactiveTintColor: '#000', //標簽和圖標未選中顏色
            inactiveBackgroundColor: 'white',//導航未選中背景色
            showIcon: true,//是否顯示 Tab 的圖標,默認不顯示
            style: {
                backgroundColor: 'yellow',//tabBar背景色
                height: 49
            },
            // labelStyle 選項卡標簽的樣式對象
            // tabStyle 選項卡的樣式對象
        },
    }
)
 
// const AppContainer = createAppContainer(StackNavigator); 頂部導航
const AppContainer = createAppContainer(BottomTabNavigator); //底部導航
 
export default class Navigation extends Component {
    render() {
        return (
            <AppContainer/>
        )
    }
}

還有一些不常用的屬性與樣式沒有用到，具體的可以查看官方：API

附加：帶有icon圖標的底部導航，用到了 nativebase 與 react-native-vector-icons

import React, { Component } from 'react';
import { createAppContainer, createBottomTabNavigator } from 'react-navigation'
import { Icon } from 'native-base';
 
import App from './App'
import Car from './Car'
import Camera from './Camera'
import Search from './Search'
 
const SELECTED_COLOR = 'white';
const UNSELECTED_COLOR = '#000';
const SELECTED_BGCOLOR = 'blue';
const UNSELECTED_BGCOLOR = 'deepskyblue';
const ORDER = ['App','Search','Camera','Car'];
 
export class TabBarIcon extends Component {
    render() {
        return(
            <Icon name={this.props.name}
                style={{
                    marginBottom: -5,
                    marginRight: 2,
                    fontSize: 24,
                    color: this.props.color,
                }}
            />
        )
    }
}
 
const BottomTabNavigator = createBottomTabNavigator(
    {
        App: {
            screen: App,
            navigationOptions: {
                tabBarLabel: '首頁',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'apps'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        },
        Car: {
            screen: Car,
            navigationOptions: {
                tabBarLabel: '汽車',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'car'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        },
        Camera: {
            screen: Camera,
            navigationOptions: {
                tabBarLabel: '相機',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'camera'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        },
        Search: {
            screen: Search,
            navigationOptions: {
                tabBarLabel: '搜索',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'search'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        }
    },
    {
        initialRouteName: 'App',
        order: ORDER,
        tabBarOptions: {
            activeTintColor: SELECTED_COLOR,
            activeBackgroundColor: SELECTED_BGCOLOR,
            inactiveTintColor: UNSELECTED_COLOR,
            inactiveBackgroundColor: UNSELECTED_BGCOLOR,
            style: {
                backgroundColor: 'pink',
            },
            labelStyle: {
                paddingBottom: 5,
                fontSize: 14,
            }
        }
    }
)
const AppContainer = createAppContainer(BottomTabNavigator); 
 
export default class FooterTabsExample extends Component {
    render() {
        return (
            <AppContainer/>
        )
    }
}

tabBarIcon:({focused}) => (
    <TabBarItem
        focused={focused}
        normalImage={require('../icon/home.png')}
        selectedImage={require('../icon/home_selected.png')}
    />
)
 
 export class TabBarItem extends Component {
    render() {
        return(
            <Image source={ this.props.focused 
                ? this.props.selectedImage 
                : this.props.normalImage }
                style={ { width:24,height:24 } }
            />
        )
    }
}

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

react-navigation 3.x 使用

react-navigation 3.x 使用

官網文檔：https://reactnavigation.org/docs/zh-Hans/getting-started.html

1、安裝react-navigation

2、安裝 react-native-gesture-handler。如果你使用 Expo，就什么都不需要做，他已經包含在 SDK 中了

頂部導航

頭部導航欄樣式屬性

底部導航樣式屬性

推薦閱讀更多精彩內容

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

react-navigation 3.x 使用

官網文檔：https://reactnavigation.org/docs/zh-Hans/getting-started.html

1、安裝react-navigation

2、安裝 react-native-gesture-handler。 如果你使用 Expo，就什么都不需要做，他已經包含在 SDK 中 了

頂部導航

頭部導航欄樣式屬性

底部導航樣式屬性

推薦閱讀更多精彩內容

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

2、安裝 react-native-gesture-handler。如果你使用 Expo，就什么都不需要做，他已經包含在 SDK 中了