欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解react-navigation6.x路由庫的基本使用

 更新時間：2021年11月10日 11:37:32   作者：在下月亮有何貴干  
最近兩個項目都用到了React Navigation，所以就研究一下如何使用，本文主要介紹了react-navigation6.x路由庫的基本使用，感興趣的可以了解一下

react-native項目初始化

打開cmd，cd到在要進行rn項目建立的文件夾。

npx react-native init testRN

這里我的項目名設置為testRN，可以自行設定。

安裝react-native項目

連接安卓虛擬機或者usb調(diào)試真機，cd進創(chuàng)建好的項目根目錄，yarn android安裝并啟動。

yarn android

初次安裝完畢之后，手機未斷連的情況的話，后續(xù)只需虛擬機或者手機進入項目app，然后pc在項目根目錄yarn start啟動就可以了不用再次安裝，斷連之后可能得重新安裝。

yarn start

啟動好了之后在cmd界面按r可以更新。

react-navigation路由庫安裝

內(nèi)容建立在android端測試，我沒有測試ios。

一口氣安裝下列包。

yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

對安卓進行額外配置，在testRN\android\app\src\main\java\com\testrn修改MainActivity.java文件。

在這里插入圖片描述

代碼：

  import android.os.Bundle;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }

使用路由庫

修改app.js為以下代碼

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    // NavigationContainer為路由的容器，將相關(guān)內(nèi)容都放在他中間
    <NavigationContainer>
      <Stack.Navigator>
        {/* Stack.Screen為路由的窗口，name設置窗口名，用于跳轉(zhuǎn)，窗口的組件內(nèi)容放在component */}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

在這里插入圖片描述

路由跳轉(zhuǎn)與路由傳參

import * as React from 'react';

// 添加Button
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
                    
                //  添加navigation參數(shù)
function HomeScreen({navigation}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      {/* 添加跳轉(zhuǎn)按鈕 */}
      <Button
        title="Go to Details"   
        // navigation.navigate('Details')用于跳轉(zhuǎn)，其中的Details指向?qū)拇翱趎ame
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    // NavigationContainer為路由的容器，將相關(guān)內(nèi)容都放在他中間
    <NavigationContainer>
      <Stack.Navigator>
        {/* Stack.Screen為路由的窗口，name設置窗口名，用于跳轉(zhuǎn)，窗口的組件內(nèi)容放在component */}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

設置路由標題

窗口默認會使用name作為標題名，當然也可以自行設定。

<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'my home'}}  />

用my home代替Home作為導航標題。

通常一級頁面跳轉(zhuǎn)去二級頁面時，也許會根據(jù)內(nèi)容不同展示不同的標題，這時候有就需要動態(tài)配置title。

<Stack.Screen name="Details" component={DetailsScreen}
   options={({ route }) => ({ title: route.params.title })}
/>

然后只要在一級頁面跳轉(zhuǎn)時傳遞title就可以了。

<Button
   title="Go to Details"
  // navigation.navigate('Details')用于跳轉(zhuǎn)，其中的Details指向?qū)拇翱趎ame
   onPress={() => navigation.navigate('Details', { title: '二級頁面' })}
/>

注意這里如果一級頁面沒有傳遞title，最好傳遞一個空對象或者在二級窗口上設置初始值否則會報錯。

還可以手動更新title，使用navigation.setOptions()，其修改的是screen上的options中的屬性。

<Button
   title="Update the title"
   onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>

自定義標題組件

設置headerTitle回調(diào)返回一個函數(shù)式組件，組件內(nèi)自定義，可以是圖片。

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('./src/img/details.png')}
    />
  );
}

<Stack.Screen name="Home" component={HomeScreen}
   options={{
     title: 'My home',
     headerTitle: (props) => <LogoTitle {...props} />
   }}
/>

標題按鈕

一樣是在screen的options上，存在headerRight可以放按鈕。

        <Stack.Screen name="Home" component={HomeScreen}
          options={{
            title: 'My home',
            headerTitle: (props) => <LogoTitle {...props} />,
            headerRight: () => (
              <Button
                onPress={() => alert('This is a button!')}
                title="Info"
                color="#fff"
              />
            ),
          }}
        />

headerBackImageSource可以修改回退按鈕圖片。

        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => (
            {
              title: route.params.title,
              headerBackImageSource: detailsImg,
            }
          )}
        />

到此這篇關(guān)于詳解react-navigation6.x路由庫的基本使用的文章就介紹到這了,更多相關(guān)react-navigation6.x路由庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • react-router-dom?V6的配置使用實踐

    react-router-dom?V6的配置使用實踐

    本文主要介紹了react-router-dom?V6的配置使用實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-05-05
  • React復制到剪貼板的示例代碼

    React復制到剪貼板的示例代碼

    本篇文章主要介紹了React復制到剪貼板的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解

    ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解

    這篇文章主要為大家介紹了ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-11-11
  • React Native仿美團下拉菜單的實例代碼

    React Native仿美團下拉菜單的實例代碼

    本篇文章主要介紹了React Native仿美團下拉菜單的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • JavaScript中React面向組件編程（上）

    JavaScript中React面向組件編程（上）

    本文主要介紹了React組件中默認封裝了很多屬性，有的是提供給開發(fā)者操作的，其中有三個屬性非常重要：state、props、refs。感興趣的小伙伴可以參考閱讀
    2023-03-03
  • 詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟

    詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟

    本篇文章主要介紹了詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-01-01
  • 如何在React項目中使用AntDesign

    如何在React項目中使用AntDesign

    我們在后臺管理系統(tǒng)React項目開發(fā)中會有Table表格、Form表單、List列表、Button按鈕等組件，這個時候我們可以使用AntDesign來減少開發(fā)中不必要的樣式問題，本文就介紹了eact項目中使用AntDesign，感興趣的可以了解一下
    2022-04-04
  • react-router-dom v6版本實現(xiàn)Tabs路由緩存切換功能

    react-router-dom v6版本實現(xiàn)Tabs路由緩存切換功能

    今天有人問我怎么實現(xiàn)React-Router-dom類似標簽頁緩存,很久以前用的是react-router v5那個比較容易實現(xiàn),v6變化挺大,但了解react的機制和react-router的機制就容易了,本文介紹react-router-dom v6版本實現(xiàn)Tabs路由緩存切換,感興趣的朋友一起看看吧
    2023-10-10
  • React實現(xiàn)多標簽在有限空間內(nèi)展示

    React實現(xiàn)多標簽在有限空間內(nèi)展示

    在業(yè)務中,需要在一個卡片組件中展示多個標簽,標簽組件高度相同,寬度和出現(xiàn)順序不同,要求標簽只能在有限的空間內(nèi)展示,所以本文給大家介紹了React實現(xiàn)多標簽在有限空間內(nèi)展示,需要的朋友可以參考下
    2023-12-12
  • React中setState的使用與同步異步的使用

    React中setState的使用與同步異步的使用

    這篇文章主要介紹了React中setState的使用與同步異步的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2021-03-03

最新評論