RN react-navigation使用

來源:互聯網
上載者:User
一、命令安裝
npm install react-navigation --save

該庫包含三類組件:

(1)StackNavigator:用來跳轉頁面和傳遞參數

(2)TabNavigator:類似底部導覽列,用來在同一屏切換不同頁面

(3)DrawerNavigator:側滑菜單導覽列,用於輕鬆設定帶抽屜的螢幕 二、react-navigation 1、StackNavigator屬性介紹

navigationOptions:配置StackNavigator的一些屬性。    title:標題,如果設定了這個導覽列和標籤欄的title就會變成一樣的,不推薦使用    header:可以設定一些導航的屬性,如果隱藏頂部導覽列只要將這個屬性設定為null    headerTitle:設定導覽列標題,推薦    headerBackTitle:設定跳轉頁面左側返回箭頭後面的文字,預設是上一個頁面的標題。可以自訂,也可以設定為null    headerTruncatedBackTitle:設定當上個頁面標題不符合返回箭頭後的文字時,預設改成"返回"    headerRight:設定導航條右側。可以是按鈕或者其他視圖控制項    headerLeft:設定導航條左側。可以是按鈕或者其他視圖控制項    headerStyle:設定導航條的樣式。背景色,寬高等    headerTitleStyle:設定導覽列文字樣式    headerBackTitleStyle:設定導覽列‘返回’文字樣式    headerTintColor:設定導覽列顏色    headerPressColorAndroid:安卓專屬的設定顏色紋理,需要安卓版本大於5.0    gesturesEnabled:是否支援滑動返回手勢,iOS預設支援,安卓預設關閉 screen:對應介面名稱,需要填入import之後的頁面mode:定義跳轉風格   card:使用iOS和安卓預設的風格   modal:iOS專屬的使螢幕從底部畫出。類似iOS的present效果headerMode:返回上級頁面時動畫效果   float:iOS預設的效果   screen:滑動過程中,整個頁面都會返回   none:無動畫cardStyle:自訂設定跳轉效果   transitionConfig: 自訂設定滑動返回的配置   onTransitionStart:當轉換動畫即將開始時被調用的功能   onTransitionEnd:當轉換動畫完成,將被調用的功能path:路由中設定的路徑的覆蓋映射配置initialRouteName:設定預設的頁面組件,必須是上面登入的頁面組件initialRouteParams:初始路由參數
StackNavigator(RouteConfigs, StackNavigatorConfig)
// 註冊導航const Navs = StackNavigator({    Home: { screen: Tabs },    HomeTwo: {        screen: HomeTwo,  // 必須, 其他都是非必須        path:'app/homeTwo', 使用url導航時用到, 如 web app 和 Deep Linking        navigationOptions: {}  // 此處設定了, 會覆蓋組件內的`static navigationOptions`設定. 具體參數詳見下文    },    HomeThree: { screen: HomeThree },    HomeFour: { screen: HomeFour }}, {    initialRouteName: 'Home', // 預設顯示介面    navigationOptions: {  // 螢幕導航的預設選項, 也可以在組件內用 static navigationOptions 設定(會覆蓋此處的設定)     headerTitle: "首頁",//導覽列標題     headerBackTitle: null,//設定跳轉頁面左側返回箭頭後面的文字,預設是上一個頁面的標題。可以自訂,也可以設定為null     headerTintColor: "#333",//設定導覽列顏色        cardStack: {            gesturesEnabled: true//是否允許右滑返回,在iOS上預設為true,在Android上預設為false        }    },     mode: 'card',  // 頁面切換模式, 左右是card(相當於iOS中的push效果), 上下是modal(相當於iOS中的modal效果)    headerMode: 'screen', // 導覽列的顯示模式, screen: 有漸層透明效果, float: 無透明效果, none: 隱藏導覽列    onTransitionStart: ()=>{ console.log('導覽列切換開始'); },  // 頁面切換開始時的回呼函數    onTransitionEnd: ()=>{ console.log('導覽列切換結束'); }  // 頁面切換結束時的回呼函數});

如果在StackNavigatorConfig裡面配置了navigationOptions的一下參數,這些參數會作用與RouteConfigs裡面的所有路由的子頁面,如果路由子頁面裡面設定了static navigationOptions那麼會覆蓋此處配置的全域參數

已經配置好導航器以及對應的路由頁面了,但是要完成頁面之間的跳轉,還需要 navigation。 navigation

在導航器中的每一個頁面,都有 navigation 屬性,該屬性有以下幾個屬性/方法:

navigate - 跳轉到其他頁面state - 當前頁面導航器的狀態setParams - 更改路由的參數goBack - 返回dispatch - 發送一個action
navigete

調用這個方法可以跳轉到導航器中的其他頁面,此方法有三個參數:

— routeName 導航器中配置的路由名稱— params 傳遞參數到下一個頁面— action action比如: this.props.navigation.navigate('Find', {param: 'i am the param'});

  state

state 裡麵包含有傳遞過來的參數 params 、 key 、路由名稱 routeName ,列印log可以看得到:

{   params: { param: 'i am the param' },  key: 'id-1500546317301-1',  routeName: 'Mine' }

  setParams

更改當前頁面路由的參數,比如可以用來更新頭部的按鈕或者標題。

componentDidMount() {    this.props.navigation.setParams({param:'i am the new param'})}

  goBack

回退,可以不傳,也可以傳參數,還可以傳 null 。

this.props.navigation.goBack();       // 回退到上一個頁面this.props.navigation.goBack(null);   // 回退到任意一個頁面this.props.navigation.goBack('Home'); // 回退到Home頁面



2、TabNavigator屬性介紹

screen:和導航的功能是一樣的,對應介面名稱,可以在其他頁面通過這個screen傳值和跳轉。navigationOptions:配置TabNavigator的一些屬性title:標題,會同時設定導航條和標籤欄的titletabBarVisible:是否隱藏標籤欄。預設不隱藏(true)tabBarIcon:設定標籤欄的表徵圖。需要給每個都設定tabBarLabel:設定標籤欄的title。推薦導覽列配置tabBarPosition:設定tabbar的位置,iOS預設在底部,安卓預設在頂部。(屬性值:'top','bottom')swipeEnabled:是否允許在標籤之間進行滑動animationEnabled:是否在更改標籤時顯示動畫lazy:是否根據需要懶惰呈現標籤,而不是提前,意思是在app開啟的時候將底部標籤欄全部載入,預設false,推薦為truetrueinitialRouteName: 設定預設的頁面組件backBehavior:按 back 鍵是否跳轉到第一個Tab(首頁), none 為不跳轉tabBarOptions:配置標籤欄的一些屬性iOS屬性activeTintColor:label和icon的前景色彩 活躍狀態下activeBackgroundColor:label和icon的背景色 活躍狀態下inactiveTintColor:label和icon的前景色彩 不活躍狀態下inactiveBackgroundColor:label和icon的背景色 不活躍狀態下showLabel:是否顯示label,預設開啟 style:tabbar的樣式labelStyle:label的樣式安卓屬性activeTintColor:label和icon的前景色彩 活躍狀態下inactiveTintColor:label和icon的前景色彩 不活躍狀態下showIcon:是否顯示表徵圖,預設關閉showLabel:是否顯示label,預設開啟 style:tabbar的樣式labelStyle:label的樣式 upperCaseLabel:是否使標籤大寫,預設為truepressColor:material漣漪效果的顏色(安卓版本需要大於5.0)pressOpacity:按壓標籤的透明度變化(安卓版本需要小於5.0)scrollEnabled:是否啟用可滾動選項卡 tabStyle:tab的樣式indicatorStyle:標籤指標的樣式對象(選項卡底部的行)。安卓底部會多出一條線,可以將height設定為0來暫時解決這個問題labelStyle:label的樣式iconStyle:表徵圖樣式
3、DrawerNavigator屬性介紹
 DrawerNavigatorConfig     drawerWidth - 抽屜的寬度     drawerPosition - 選項是左或右。 預設為左側位置     contentComponent - 用於呈現抽屜內容的組件,例如導航項。 接收抽屜的導航。 預設為DrawerItems     contentOptions - 配置抽屜內容     initialRouteName - 初始路由的routeName     order - 定義抽屜項目順序的routeNames數組。     路徑 - 提供routeName到路徑配置的映射,它覆蓋routeConfigs中設定的路徑。     backBehavior - 後退按鈕是否會切換到初始路由。 如果是,設定為initialRoute,否則為none。 預設為initialRoute行為    DrawerItems的contentOptions屬性     activeTintColor - 活動標籤的標籤和表徵圖顏色     activeBackgroundColor - 活動標籤的背景顏色     inactiveTintColor - 非活動標籤的標籤和表徵圖顏色     inactiveBackgroundColor - 非活動標籤的背景顏色     內容部分的樣式樣式對象     labelStyle - 當您的標籤是字串時,要覆蓋內容部分中的文本樣式的樣式對象

4、使用StackNavigator + TabNavigator實現Tab介面切換、介面間導航

1>首先匯入必要組件(包含導航路由)

import { StackNavigator, TabNavigator, TabBarBottom } from "react-navigation";import Home from "./category/Home";import Feedback from "./category/feedback/feedback";import Task from "./category/task/taskHome";

2>定義TabNavigator

const MyTab = TabNavigator(    {        Home: {            screen: Home,            navigationOptions: ({ navigation }) => ({                headerTitle: "首頁",                tabBarLabel: "首頁",                headerBackTitle: null,                tabBarIcon: ({ tintColor }) => (                    <Image                        style={styles.imageStyle}                        source={                            tintColor == "#ff552e"                                ? require("./img/yingxiao/ac-jingxuan.png")                                : require("./img/yingxiao/jingxuan.png")                        }                    />                )            })        },        Feed: {            screen: Feedback,            navigationOptions: ({ navigation }) => ({                headerTitle: "意見反饋",                tabBarLabel: "我的",                headerBackTitle: null,                headerRight: (                    <Text                        style={{ color: "#333", marginRight: 14, fontSize: 16 }}                        onPress={() =>                            navigation.state.params ? navigation.state.params.submit() : null                        }>                        提交                    </Text>                ),                tabBarIcon: ({ tintColor }) => (                    <Image                        style={styles.imageStyle}                        source={                            tintColor == "#ff552e"                                ? require("./img/yingxiao/ac-laidiantong.png")                                : require("./img/yingxiao/laidiantong.png")                        }                    />                )            })        }    },    {        tabBarComponent: TabBarBottom,        tabBarPosition: "bottom", //設定tabbar的位置,iOS預設在底部,安卓預設在頂部。(屬性值:'top','bottom')        swipeEnabled: true, //是否允許在標籤之間滑動        animationEnabled: false, //是否在更改標籤時顯示動畫        lazy: true, //是否根據需要懶惰呈現標籤,而不是提前製作,意思是在app開啟的時候將底部標籤欄全部載入,預設false,推薦改成true        tabBarOptions: {            activeTintColor: "#ff552e", //label和icon的前景色彩 活躍狀態下(選中)            // activeBackgroundColor:'blue',//label和icon的背景色 活躍狀態下            inactiveTintColor: "#333", //label和icon的前景色彩 不活躍狀態下            showLabel: true, //是否顯示label,預設開啟            showIcon: true, // android 預設不顯示 icon, 需要設定為 true 才會顯示            style: { backgroundColor: "#ffffff" }, //tabbar的樣式            labelStyle: {                fontSize: 14 // 文字大小            }        }    });

3>定義StackNavigator

效果圖:

const AppIndex = StackNavigator({    Main: {        screen: MyTab    },    Task: {        screen: Task,        navigationOptions: {            headerBackTitle: null        }    }});



任務系統導航跳轉到任務首頁:



痛點:導航右側配置按鈕:

headerRight:設定導航條右側。可以是按鈕或者其他視圖控制項
使用react-navigation時,單版面設定navigationOptions中,進行Static中調用方法,不能像以下設定

onPress = {()=>this.share()}

static navigationOptions = ({ navigation }) => ({        title: `${navigation.state.params.title}`,        headerBackTitle: `${navigation.state.params.title}`,        headerRight: (            <View style={{ flexDirection: "row" }}>                <Text                    style={{ color: "#333", marginRight: 13 }}                    // static裡面不能使用this調用方法,出現share is not function                    onPress={()=>this.share()                    }>                    分享                </Text>                            </View>        )    });
解決辦法:
//右側配置兩個按鈕static navigationOptions = ({ navigation }) => ({        title: `${navigation.state.params.title}`,        headerBackTitle: `${navigation.state.params.title}`,        headerRight: (            <View style={{ flexDirection: "row" }}>                <Text                    style={{ color: "#333", marginRight: 13 }}                    onPress={() =>                        navigation.state.params ? navigation.state.params.share() : null                    }>                    分享                </Text>                <Text                    style={{ color: "#333", marginRight: 13 }}                    onPress={() =>                        navigation.state.params ? navigation.state.params.jumpToRule() : null                    }>                    兌換規則                </Text>            </View>        )    });

例如分享:

首先在本類中聲明一個share(){

}的方法

頁面掛載完成在componentDidMount裡面設定navigation的setParams把方法注入到navigation中去

componentDidMount() {        // 通過在componentDidMount裡面設定setParams        this.props.navigation.setParams({            share: this.share        });    }

然後點擊時直接在navigation中尋找剛剛注入的放置直接調用

onPress={() =>                        navigation.state.params ? navigation.state.params.share() : null                    }

本人開發中最初的處理方式:

把導航裡面配置的按鈕需要調用的本類函數放到window全域對象下面,然後在全域裡面尋找調用


 


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.