React native header指南

迪鲁宾
927 阅读4分钟

React native header

React Native页眉简介

头部是任何网页的一个重要部分。头部定义了其下描述的信息的背景。在创建一个网站或应用程序时，必须为不同的网站或应用程序部分包含多个头文件。这有助于对网站或应用程序的不同部分进行分流。React Native也提供了根据网站或应用程序的要求来创建标题的选项。在这篇文章中，有不同的标题例子来解释反应式原生中的标题以及它在不同情况下的用法。

语法

下面提到了不同的语法。

  • ParallaxHeader 语法-

<ReactNativeParallaxHeader headerMaxHeight={400} headerMinHeight={HEADER_HEIGHT} extraScrollHeight={50} navbarColor="#f2c068" backgroundImageScale={9} backgroundImage={require('./Dragon.png')} titleStyle={styles.titleStyle} title={title()} innerContainerStyle={styles.container} renderContent={renderContent} renderNavBar={renderNavBar} />

  • Progress Header 语法-

<ProgressHeader progressActiveColor="#c70606" headerTitle="EDUCBA" headerTitleHeight= "10" headerTitleColor="#f07c3e" totalProgress="10" currentprogress="5" headerBackgroundColor="#aaf054" progressInactiveColor="#edcb6d" />

  • AppHeader 语法-

<Appbar.Header style={styles.title}> <Appbar.Content subtitle="Traning Provider" title="EDUCBA" color="#4369e6" /> </Appbar.Header>

React Native Header实例及其工作原理

以下是不同的例子和它们的工作原理。

1.基本页眉示例

在这个例子中， navigation.setOptions被用来导航应用程序中的不同选项，当添加时。我们用headerTitle来设置标题，用headerStyle来设计标题组件。

组件来执行代码。

React native header output 1

[i] Fun.js

import React from 'react'; import { SafeAreaView , StyleSheet , Text , TouchableOpacity , View } from 'react-native'; const Rahul = ({ navigation }) => { React.useLayoutEffect(() => { navigation.setOptions({ headerTitle: (props) => ( <Text {...props} style={{ color: '#f5df53', fontWeight: 'italics' }}> EBUCBA </Text> ), headerStyle: { backgroundColor: '#d1133f', }, }); }, ); return ( <SafeAreaView style={{ flex: 2, backgroundColor: '#98f5c2' }}> <Text style={{ textAlign: 'center', color: '#fa3620' }}> www.educba.com </Text> </SafeAreaView> ); }; export default Rahul; const styles = StyleSheet.create({ container: { flex: 5, justifyContent: 'center', alignItems: 'center', padding: 18, }, header: { fontSize: 20, textAlign: 'center', marginVertical: 15, }, });

[ii] App.js

import 'react-native-gesture-handler'; import React from 'react'; import { createStackNavigator } from '@react-navigation/stack'; import { NavigationContainer } from '@react-navigation/native'; import Rahul from './zoo/Fun'; const Shelf = createStackNavigator(); const Application = () => { return ( <NavigationContainer> <Shelf.Navigator initialRouteName="Fun"> <Shelf.Screen name="Fun" component={Rahul} /> </Shelf.Navigator> </NavigationContainer> ); }; export default Application;

输出。

React native header output 2

2.ParallaxHeader示例

在这个例子中，我们使用react-native-parallax-header'依赖关系开发了带有背景图片的React Native parallaxheader。

用来正确执行代码的组件。

React native header output 3

[i]Dragon.png

React native header output 4

[ii] App.js

import React from 'react'; import { StyleSheet , View , Text , StatusBar , Dimensions , TouchableOpacity } from 'react-native'; import ReactNativeParallaxHeader from 'react-native-parallax-header'; const NAV_BAR_HEIGHT = 50; const HEADER_HEIGHT = 50; const IS_ANDROID_X = 900; const STATUS_BAR_HEIGHT = 20; const {height: SCREEN_HEIGHT} = Dimensions.get('window'); const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#eb6e67', }, statusBar: { backgroundColor: '#ef78ff', alignItems: 'center', flexDirection: 'column', height: 26, }, navContainer: { height: 30, marginHorizontal: 15, }, navBar: { alignItems: 'center', flexDirection: 'column', backgroundColor: '#bbfc79', }, }); const renderContent = () => { return ( <View style={styles.body}> {Array.from(Array(1).keys()).map((i) => ( <View key={i} style={{padding: 25 , alignItems: 'center' , justifyContent: 'center' , color: '#f02ba8'}}> <Text>EDUCBA</Text> </View> ))} </View> ); }; const renderNavBar = () => ( <View style={styles.navContainer}> <View style={styles.statusBar} /> <View style={styles.navBar}> <TouchableOpacity style={styles.iconRight} onPress={() => {}}> <Text style={{color: '#e6153b'}}>E</Text> </TouchableOpacity> </View> </View> ); const App = () => { return ( <> <ReactNativeParallaxHeader headerMaxHeight={400} headerMinHeight={HEADER_HEIGHT} extraScrollHeight={50} navbarColor="#f2c068" backgroundImageScale={9} backgroundImage={require('./Dragon.png')} titleStyle={styles.titleStyle} title={title()} innerContainerStyle={styles.container} renderContent={renderContent} renderNavBar={renderNavBar} /> <StatusBar barStyle="light-content" /> </> ); }; const title = () => { return ( <View style={styles.body}> <Text style={{color: '#e8dce4' , justifyContent: 'center' , fontSize: 25}}>EDUCBA HEADER EXAMPLE</Text> </View> ); }; export default App;

输出。

React native header output 5

3.React Native进度标题

在这个例子中，我们使用'react-native-header-types'依赖关系开发了一个带有进度条的进度头。

用来正确执行代码的组件。

output 6

[i] App.js

import React from 'react'; import { ProgressHeader } from 'react-native-header-types'; import {StyleSheet , Text , View , TouchableOpacity , Image } from 'react-native'; const decoration = StyleSheet.create({ container:{ padding: 50, flex: 3, backgroundColor:'#e182ed', height: 100, marginHorizontal: 9, }, }); class Rahul extends React.Component { render() { return ( <View style={decoration.container}> <ProgressHeader progressActiveColor="#c70606" headerTitle="EDUCBA" headerTitleHeight= "10" headerTitleColor="#f07c3e" totalProgress="10" currentprogress="5" headerBackgroundColor="#aaf054" progressInactiveColor="#edcb6d" /> </View> ); } constructor(props) { super(props); this.state = { isLoading:true, }; } } export default Rahul;

输出。

output 7

4.React Native AppHeader

使用'react-native-paper'依赖性开发了一个基本的AppHeader，并使用样式表对其进行了样式处理。

用来正确执行代码的组件。

output 8

[i] App.js

import * as React from 'react'; import {StyleSheet , Text , View , TouchableOpacity } from 'react-native'; import { Appbar } from 'react-native-paper'; const styles = StyleSheet.create({ container:{ flex: 2, backgroundColor:'#f76d8b', }, title:{ flex: 2, backgroundColor:'#e88f3c', flexDirection: 'column', }, }); const EDUCBA = () => { return ( <View style={styles.container}> <Appbar.Header style={styles.title}> <Appbar.Content subtitle="Traning Provider" title="EDUCBA" color="#4369e6" /> </Appbar.Header> </View> ); }; export default EDUCBA;

输出。

output 9

5.合并了所有页眉的高级示例

在下面的例子中，所有上述讨论的头文件都被合并，并通过导入它们各自的依赖关系来开发。

用于正确执行的组件。

output 10

[i] Dragon.png

output 11

[ii[ App.js

import React from 'react'; import { StyleSheet , View , Text , StatusBar , Dimensions , TouchableOpacity } from 'react-native'; import { ProgressHeader } from 'react-native-header-types'; import ReactNativeParallaxHeader from 'react-native-parallax-header'; import { Appbar } from 'react-native-paper'; const NAV_BAR_HEIGHT = 50; const HEADER_HEIGHT = 50; const IS_ANDROID_X = 900; const STATUS_BAR_HEIGHT = 20; const {height: SCREEN_HEIGHT} = Dimensions.get('window'); const styles = StyleSheet.create({ ex:{ backgroundColor:'#e182ed', marginHorizontal: 9, marginVertical: 9, }, rx:{ backgroundColor:'#e182ed', marginHorizontal: 9, marginVertical: 9, }, container: { flex: 3, backgroundColor:'#e182ed', marginHorizontal: 9, marginVertical: 9, }, title:{ flex: 2, backgroundColor:'#e88f3c', flexDirection: 'column', }, statusBar: { backgroundColor: '#64deab', alignItems: 'center', flexDirection: 'column', height: 26, marginHorizontal: 9, marginVertical: 9, }, navContainer: { height: 30, marginHorizontal: 9, marginVertical: 9, }, navBar: { alignItems: 'center', flexDirection: 'column', backgroundColor: '#f55678', }, }); const renderContent = () => { return ( <View style={styles.body}> {Array.from(Array(1).keys()).map((i) => ( <View key={i} style={{padding: 25 , alignItems: 'center' , justifyContent: 'center' , color: '#f02ba8' , marginHorizontal: 9 , marginVertical: 9,}}> <Text>EDUCBA</Text> </View> ))} </View> ); }; const renderNavBar = () => ( <View style={styles.navContainer}> <View style={styles.statusBar} /> <View style={styles.navBar}> <TouchableOpacity style={styles.iconRight} onPress={() => {}}> <Text style={{color: '#ebe859', marginHorizontal: '9', marginVertical: '9'}}>E</Text> </TouchableOpacity> </View> </View> ); const App = () => { return ( <> <View style={styles.rx}> <Appbar.Header style={styles.title}> <Appbar.Content subtitle="Traning Provider" title="EDUCBA" color="#4369e6" /> </Appbar.Header> </View> <ReactNativeParallaxHeader headerMaxHeight={400} headerMinHeight={HEADER_HEIGHT} extraScrollHeight={50} navbarColor="#f2c068" backgroundImageScale={9} backgroundImage={require('./Dragon.png')} titleStyle={styles.titleStyle} title={title()} innerContainerStyle={styles.container} renderContent={renderContent} renderNavBar={renderNavBar} /> <StatusBar barStyle="light-content" /> <View style={styles.ex}> <ProgressHeader progressActiveColor="#c70606" headerTitle="EDUCBA" headerTitleHeight= "10" headerTitleColor="#f07c3e" totalProgress="10" currentprogress="5" headerBackgroundColor="#aaf054" progressInactiveColor="#edcb6d" /> </View> </> ); }; const title = () => { return ( <View style={styles.body}> <Text style={{color: '#e8dce4' , justifyContent: 'center' , fontSize: 25 ,marginHorizontal: 100, marginVertical: 100,}}>EDUCBA HEADER EXAMPLE</Text> </View> ); }; export default App;

输出。

output 12

output 13

结论

基于上面的文章，我们了解了页眉的概念。我们通过多个例子来了解它在应用程序或网页的不同要求下的应用。我们看到了创建页眉的优势，以及它是如何帮助我们的应用程序与用户产生更多的互动。

推荐文章

这是一个关于React native header的指南。在这里，我们讨论了React Native中页眉的概念，并通过多个例子来了解它的应用。你也可以看看下面的文章来了解更多 --

  1. React Native权限
  2. React格式
  3. React Native菜单
  4. React Native颜色

The postReact native headerappeared first onEDUCBA.

avatar
文章
阅读
粉丝