React Navigation顶部导航自定义左侧返回按钮图标和文案-Toy模板网

这篇具有很好参考价值的文章主要介绍了React Navigation顶部导航自定义左侧返回按钮图标和文案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React Navigation顶部导航自定义左侧返回按钮图标和文案,web前端,react.js,前端,前端框架

router/config.js:

import Login from '../views/light/login/Login'
import Register from '../views/light/register/Index'
import ForgetPassword from '../views/light/forgetPassword/Index'
import Web from '../views/light/web/Index'
import Index from '../views/light/index/Index'
import MeTabs from '../views/light/index/me/tabs/Index'
import IndexForTab from '../views/light/test/tab1/IndexForTab'
import { View, Text } from 'react-native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { Back } from '../component/light'
const Stack = createNativeStackNavigator()

const routerOptions = {
  headerTitleAlign: 'center',
  headerStyle: { backgroundColor: '#f6f6f6' },
  headerBackVisible: false,
}

const getRouter = () => {
  const routerList = [
    {
      name: 'Login',
      component: Login,
      options: {
        ...routerOptions,
        title: '登录',
      },
    },
    {
      name: 'Register',
      component: Register,
      options: {
        ...routerOptions,
        title: '注册',
      },
    },
    {
      name: 'ForgetPassword',
      component: ForgetPassword,
      options: {
        ...routerOptions,
        title: '忘记密码',
      },
    },
    {
      name: 'Web',
      component: Web,
      options: {
        headerShown: false,
      },
    },
    {
      name: 'Index',
      component: Index,
      options: {
        headerShown: false,
      },
    },
    {
      name: 'MeTabs',
      component: MeTabs,
      options: {
        ...routerOptions,
        headerBackVisible: false,
        title: '',
        headerLeft: () => (<Back></Back>)
      },
    },
    {
      name: 'IndexForTab',
      component: IndexForTab,
      options: {
        headerShown: false,
      },
    },
  ]
  return routerList.map((item) => (
    <Stack.Screen
      name={item.name}
      component={item.component}
      options={item.options}
      key={item.name}
    ></Stack.Screen>
  ))
}

export { getRouter }

back/Index.js:

import React, { useState } from 'react'
import { View, Text, TouchableWithoutFeedback } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import Icon from '../icon/Index'
import styles from './styles'

export default function Index(props) {
  const navigation = useNavigation()

  const handleBack = () => {
    console.log(1)
    navigation.goBack()
  }
  return (
    <TouchableWithoutFeedback onPress={handleBack}>
      <View style={styles.mBackWrap}>
        <Icon name="arrow" style={styles.mBackIcon}></Icon>
        <Text style={styles.mBackText}>返回</Text>
      </View>
    </TouchableWithoutFeedback>
  )
}

React Navigation顶部导航自定义左侧返回按钮图标和文案,web前端,react.js,前端,前端框架