使用导航选项在RN中自定义React导航标题

使用导航选项在RN中自定义React导航标题

作者

使用导航选项在RN中自定义React导航标题

这是使用导航选项在 React Native 中自定义 React 导航标题的示例。在此示例中，我们将了解如何自定义导航栏/导航标题。默认情况下，React Native 不提供任何标题，只有当我们添加 React Navigation 来切换活动时才会提供。

有时我们必须根据需要自定义标题，我们可以借助导航选项轻松完成此操作。在这篇文章中，我们将看到完整的自定义标题以及左右标题的自定义。

推荐：如何在非响应主题中添加Weebly Pro标题幻灯片

标题自定义使用

React.useLayoutEffect(() => {
  navigation.setOptions({
    headerTitle: (props) => (
      
        Custom Title
      
    ),
    headerStyle: {
      backgroundColor: '#f4511e', //Set Header color
    },
  });
}, (navigation));

左、右标题自定义使用

React.useLayoutEffect(() => {
  navigation.setOptions({
    title: 'Second Page', //Set Header Title
    headerStyle: {
      backgroundColor: '#f4511e', //Set Header color
    },
    headerTintColor: '#fff', //Set Header text color
    headerTitleStyle: {
      fontWeight: 'bold', //Set Header text style
    },
    headerLeft: () => (
       alert('Left Menu Clicked')}
        style={{marginLeft: 10}}>
        Left Menu
      
    ),
    headerRight: () => (
       alert('Right Menu Clicked')}
        style={{marginRight: 10}}>
        Right Menu
      
    ),
  });
}, (navigation));

在此示例中，我们将创建两个屏幕，并使用 React Navigation 在它们之间切换。在第一个屏幕上，您将看到如何在标题中添加自定义标题，在第二个屏幕上，您将看到左侧和右侧标题的自定义。

制作 React Native 应用

开始使用 React Native 将帮助您更多地了解如何创建 React Native 项目。我们将使用 react native 命令行界面来制作我们的 React Native 应用程序。

如果您之前安装了全局 react-native-cli 包，请将其删除，因为它可能会导致意外问题：

npm uninstall -g react-native-cli @react-native-community/cli

运行以下命令创建一个新的 React Native 项目

npx react-native init ProjectName

如果你想使用特定的 React Native 版本启动新项目，你可以使用 –version 参数：

npx react-native init ProjectName --version X.XX.X

注意如果上述命令失败，你可能有旧版本的 react-native 或者 react-native-cli 已全局安装在您的电脑上。尝试卸载 cli 并使用 npx 运行 cli。

这将在您的项目目录中创建一个项目结构，其中有一个名为 App.js 的索引文件。

安装依赖项

为了在屏幕之间导航，我们需要添加 react-navigation 以及其他支持依赖项。

要安装依赖项，请打开终端并进入你的项目

cd ProjectName

1. 安装 react-navigation

npm install @react-navigation/native --save

2. 其他支持库 react-native-screens 和 react-native-safe-area-context

npm install react-native-screens react-native-safe-area-context --save

react-native-screens 软件包需要一个额外的配置步骤才能在 Android 设备上正常工作。编辑 MainActivity.java 文件位于 android/app/src/main/java//MainActivity.java。

将以下代码添加到 MainActivity 班级：

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

并确保在此文件顶部的包语句下方添加以下导入语句：

import android.os.Bundle;

需要进行此更改以避免与视图状态在 Activity 重启时不一致而导致的崩溃。

3. 安装 Stack Navigator

npm install @react-navigation/native-stack --save

推荐：多用途WooCommerce WordPress主题Uomo

CocoaPods 安装

请使用以下命令安装 CocoaPods

npx pod-install

项目结构

要开始此示例，您需要在项目中创建一个名为 pages 的目录，并创建两个文件 FirstPge.js 和 SecondPage.js

使用导航选项在RN中自定义React导航标题
使用导航选项在RN中自定义React导航标题

代码

现在在任何代码编辑器中打开 App.js 并将代码替换为以下代码

App.js

// React Navigation Header Customization in RN using Navigation Options
// https://aboutreact.com/custom-header-using-navigation-options-in-react-native/

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    
      
        
        
      
    
  );
};

export default App;

在任何代码编辑器中打开 FirstPage.js 并用以下代码替换代码。

FirstPage.js

// React Navigation Header Customization in RN using Navigation Options
// https://aboutreact.com/custom-header-using-navigation-options-in-react-native/

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

const FirstPage = ({navigation}) => {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: (props) => (
        
          Custom Title
        
      ),
      headerStyle: {
        backgroundColor: '#f4511e', //Set Header color
      },
    });
  }, (navigation));

  return (
    
      
        
          React Navigation Header Customisation in
          RN using Navigation Options
        
        Full Customized Header

         navigation.navigate('SecondPage')}
          activeOpacity={0.7}
          style={styles.buttonStyle}>
          
            Click to see Left and Right align header
          
        
      
      
        www.aboutreact.com
      
    
  );
};

export default FirstPage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  header: {
    fontSize: 25,
    textAlign: 'center',
    marginVertical: 16,
  },
  buttonStyle: {
    width: '100%',
    height: 40,
    padding: 10,
    backgroundColor: '#808080',
    borderRadius: 2,
    marginTop: 12,
  },
  textStyle: {
    color: '#fff',
    textAlign: 'center',
  },
});

在任何代码编辑器中打开 SecondPage.js 并将代码替换为以下代码。

SecondPage.js

// React Navigation Header Customization in RN using Navigation Options
// https://aboutreact.com/custom-header-using-navigation-options-in-react-native/

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

const SecondPage = ({navigation}) => {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: 'Second Page', //Set Header Title
      headerStyle: {
        backgroundColor: '#f4511e', //Set Header color
      },
      headerTintColor: '#fff', //Set Header text color
      headerTitleStyle: {
        fontWeight: 'bold', //Set Header text style
      },
      headerLeft: () => (
         alert('Left Menu Clicked')}
          style={{marginLeft: 10}}>
          Left Menu
        
      ),
      headerRight: () => (
         alert('Right Menu Clicked')}
          style={{marginRight: 10}}>
          Right Menu
        
      ),
    });
  }, (navigation));

  return (
    
      
        
          React Navigation Header Customisation in
          RN using Navigation Options
        
        Left and Right Custom navigation bar
      
      
        www.aboutreact.com
      
    
  );
};

export default SecondPage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  header: {
    fontSize: 25,
    textAlign: 'center',
    marginVertical: 16,
  },
  textStyle: {
    color: '#fff',
    textAlign: 'center',
  },
});

运行 React Native 应用程序

再次打开终端并使用进入您的项目。

cd ProjectName

1. 启动 Metro Bundler

首先，您需要启动 Metro，它是 React Native 附带的 JavaScript 打包器。要启动 Metro 打包器，请运行以下命令：

npx react-native start

一旦启动 Metro Bundler，它将永远在您的终端上运行，直到您关闭它。让 Metro Bundler 在其自己的终端中运行。打开一个新终端并运行该应用程序。

2.启动React Native应用程序

要在 Android 虚拟设备或真实调试设备上运行项目：

npx react-native run-android

或者在 iOS 模拟器上运行（仅限 macOS）

npx react-native run-ios

这就是如何在 React Native 中使用导航选项自定义标题。如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们。很快会有更多帖子发布。

推荐：如何在Microsoft Excel中使用规划求解插件

Previous

如何在Windows中给字母添加重音符号

Next

在Debian Linux上安装Discord应用程序

相关文章

在Microsoft Excel中添加时间的4种方法

在Microsoft Excel中添加时间的4种方法

在Microsoft Excel中查找循环引用的7种方法

在Microsoft Excel中查找循环引用的7种方法

将CSV转换为Excel的8种简便方法

将CSV转换为Excel的8种简便方法

在Microsoft Excel中插入分页符的8种方法

在Microsoft Excel中插入分页符的8种方法

发表评论