react-native入門(六)---導航相關以及界面以前傳值

RN裏面的導航是依賴三方庫的，作的不錯，官方推薦這個react-navigation

導入方式，在.package裏面這樣加入三方庫名稱

或者在根目錄下輸入 npm install --save react-navigation 便可

導入結果以下

"dependencies": {
    "@ant-design/react-native": "^3.1.5",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-image-crop-picker": "^0.24.1",
    "react": "16.8.6",
    "react-native": "0.60.5",
    "react-navigation": "^3.11.0"
  },
複製代碼

下面介紹下tabbar和navigation

tabbar和navigation

const Tabs = createBottomTabNavigator({
    HomePage: {
        screen: Home,
        navigationOptions: {
            tabBarLabel: '首頁',
            tabBarIcon: ({focused, tintColor}) => (
                <view/>
            )
        }
    },
    MinePage: {
        screen: Mine,
        navigationOptions: {
            tabBarLabel: '個人',
            tabBarIcon: ({focused, tintColor}) => (
                <view/>
            )
        }
    },
}, {
    tabBarOptions: {
        style: {
            height: 49,
            backgroundColor: '#fff',
            paddingBottom: 22,
            paddingTop: 6,
            // paddingBottom: 4,
            borderTopWidth: 0,
            shadowOffset: {width: 0, height: 2},
            shadowOpacity: 0.2,
            shadowRadius: 4,
            shadowColor: 'black',
            elevation: 4,
        },
        inactiveTintColor: 'black',
        activeTintColor: 'blue'
    }
    tabBarComponent: props => <CustomTabbar {...props} /> //自定義相關
});
複製代碼

上面的能夠理解爲定義了一個tabbar控制器，Tab即爲其控制器名稱

頁面棧(navigation),其形式爲一個棧的形式，app啓動時默認加載第一個標籤，

let RootStack = createStackNavigator({
    TabsPage: {
        screen: HomePage,
        navigationOptions: {
            header: null
        }
    },
    MyInfo: {
        screen: MyInfo
    }
}, {
    defaultNavigationOptions: ({navigation}) => {
        const {
            state: {
                routeName
            }
        } = navigation

        return {
            gesturesEnabled: true,
            headerBackTitle: null,
            headerStyle: {
                backgroundColor: '#172435',
                borderBottomWidth: 0,
                elevation: 0
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                color: '#fff',
                fontSize: 24
            },
            headerLeft: (
                <TouchableOpacity
                    style={[
                        {
                            width: 60,
                            alignItems: 'center',
                            justifyContent: 'center'
                        },
                    ]}
                    onPress={() => {
                        const {
                            index
                        } = navigation.dangerouslyGetParent().state
                        if (index !== 0) {
                            navigation.pop()
                        } else {

                        }
                    }}
                >
                </TouchableOpacity>
            )
        }

    },
    transitionConfig: () => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    })
});

複製代碼

對外聲明頁面棧，用於啓動app

const App = createAppContainer(RootStack);
複製代碼

這樣設置完畢便可嘗試使用app了，設置完以前本身建立幾個頁面試試吧

導航之間的跳轉和傳值

按照上面設置完成頁面棧以後

跳轉push：（第一個參數爲聲明的頁面名稱， 第二個爲傳遞的參數，爲一個對象）

this.props.navigation.push('MyInfo', {item: myInfo})
複製代碼

注：若想回調傳遞一個callback回調便可

this.props.navigation.push('MyInfo', {
    callback: ()=>{
        //我是回調
    }
})
複製代碼

接收對象：(跳轉後的頁面,param爲傳遞過來的參數)

let param = this.props.navigation.state.params
複製代碼

返回pop:

this.props.navigation.goback()
複製代碼

切換棧navigate：（用於切換棧，若是當前棧裏面沒有改頁面會push進入一個頁面，若是有頁面會切換到前面指定的頁面,上面的頁面會被pop掉，也能夠經過這個切換tabbar標籤）

this.props.navigation.navigate('MyInfo')   
複製代碼

導航相關的就想介紹到這些了，詳細的屬性能夠去react-navigation官網查看吆，更有助與理解