91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

react-navigation6.x路由庫的基本使用方法是什么

發布時間:2021-11-10 14:11:57 來源:億速云 閱讀:291 作者:iii 欄目:開發技術

這篇文章主要講解了“react-navigation6.x路由庫的基本使用方法是什么”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“react-navigation6.x路由庫的基本使用方法是什么”吧!

react-native項目初始化

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

npx react-native init testRN

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

安裝react-native項目

連接安卓虛擬機或者usb調試真機,cd進創建好的項目根目錄,yarn android安裝并啟動。

yarn android

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

yarn start

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

react-navigation路由庫安裝

內容建立在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文件。

react-navigation6.x路由庫的基本使用方法是什么

代碼:

  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為路由的容器,將相關內容都放在他中間
    <NavigationContainer>
      <Stack.Navigator>
        {/* Stack.Screen為路由的窗口,name設置窗口名,用于跳轉,窗口的組件內容放在component */}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

react-navigation6.x路由庫的基本使用方法是什么

路由跳轉與路由傳參

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參數
function HomeScreen({navigation}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      {/* 添加跳轉按鈕 */}
      <Button
        title="Go to Details"   
        // navigation.navigate('Details')用于跳轉,其中的Details指向對應的窗口name
        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為路由的容器,將相關內容都放在他中間
    <NavigationContainer>
      <Stack.Navigator>
        {/* Stack.Screen為路由的窗口,name設置窗口名,用于跳轉,窗口的組件內容放在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作為導航標題。

通常一級頁面跳轉去二級頁面時,也許會根據內容不同展示不同的標題,這時候有就需要動態配置title。

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

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

<Button
   title="Go to Details"
  // navigation.navigate('Details')用于跳轉,其中的Details指向對應的窗口name
   onPress={() => navigation.navigate('Details', { title: '二級頁面' })}
/>

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

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

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

自定義標題組件

設置headerTitle回調返回一個函數式組件,組件內自定義,可以是圖片。

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,
            }
          )}
        />

感謝各位的閱讀,以上就是“react-navigation6.x路由庫的基本使用方法是什么”的內容了,經過本文的學習后,相信大家對react-navigation6.x路由庫的基本使用方法是什么這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

通许县| 九龙坡区| 泽库县| 信丰县| 乐陵市| 锡林浩特市| 广昌县| 新巴尔虎左旗| 遂昌县| 翼城县| 宝鸡市| 黄山市| 财经| 丹阳市| 贵阳市| 阿拉善右旗| 遂宁市| 金秀| 循化| 九江市| 罗山县| 内江市| 射洪县| 双柏县| 崇信县| 麻城市| 明溪县| 秀山| 罗平县| 高要市| 常熟市| 庐江县| 昆明市| 黄冈市| 扎赉特旗| 宁蒗| 仁化县| 武川县| 来凤县| 陕西省| 茌平县|