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

 router/config.js:

1.  
   import Login from '../views/light/login/Login'
2.  
   import Register from '../views/light/register/Index'
3.  
   import ForgetPassword from '../views/light/forgetPassword/Index'
4.  
   import Web from '../views/light/web/Index'
5.  
   import Index from '../views/light/index/Index'
6.  
   import MeTabs from '../views/light/index/me/tabs/Index'
7.  
   import IndexForTab from '../views/light/test/tab1/IndexForTab'
8.  
   import { View, Text } from 'react-native'
9.  
   import { createNativeStackNavigator } from '@react-navigation/native-stack'
10.  
    import { Back } from '../component/light'
11.  
    const Stack = createNativeStackNavigator()
12.  
     
13.  
    const routerOptions = {
14.  
    headerTitleAlign: 'center',
15.  
    headerStyle: { backgroundColor: '#f6f6f6' },
16.  
    headerBackVisible: false,
17.  
    }
18.  
     
19.  
    const getRouter = () => {
20.  
    const routerList = [
21.  
    {
22.  
    name: 'Login',
23.  
    component: Login,
24.  
    options: {
25.  
    ...routerOptions,
26.  
    title: '登录',
27.  
    },
28.  
    },
29.  
    {
30.  
    name: 'Register',
31.  
    component: Register,
32.  
    options: {
33.  
    ...routerOptions,
34.  
    title: '注册',
35.  
    },
36.  
    },
37.  
    {
38.  
    name: 'ForgetPassword',
39.  
    component: ForgetPassword,
40.  
    options: {
41.  
    ...routerOptions,
42.  
    title: '忘记密码',
43.  
    },
44.  
    },
45.  
    {
46.  
    name: 'Web',
47.  
    component: Web,
48.  
    options: {
49.  
    headerShown: false,
50.  
    },
51.  
    },
52.  
    {
53.  
    name: 'Index',
54.  
    component: Index,
55.  
    options: {
56.  
    headerShown: false,
57.  
    },
58.  
    },
59.  
    {
60.  
    name: 'MeTabs',
61.  
    component: MeTabs,
62.  
    options: {
63.  
    ...routerOptions,
64.  
    headerBackVisible: false,
65.  
    title: '',
66.  
    headerLeft: () => (<Back></Back>)
67.  
    },
68.  
    },
69.  
    {
70.  
    name: 'IndexForTab',
71.  
    component: IndexForTab,
72.  
    options: {
73.  
    headerShown: false,
74.  
    },
75.  
    },
76.  
    ]
77.  
    return routerList.map((item) => (
78.  
    <Stack.Screen
79.  
    name={item.name}
80.  
    component={item.component}
81.  
    options={item.options}
82.  
    key={item.name}
83.  
    ></Stack.Screen>
84.  
    ))
85.  
    }
86.  
     
87.  
    export { getRouter }

 back/Index.js:

1.  
   import React, { useState } from 'react'
2.  
   import { View, Text, TouchableWithoutFeedback } from 'react-native'
3.  
   import { useNavigation } from '@react-navigation/native'
4.  
   import Icon from '../icon/Index'
5.  
   import styles from './styles'
6.  
    
7.  
   export default function Index(props) {
8.  
   const navigation = useNavigation()
9.  
    
10.  
    const handleBack = () => {
11.  
    console.log(1)
12.  
    navigation.goBack()
13.  
    }
14.  
    return (
15.  
    <TouchableWithoutFeedback onPress={handleBack}>
16.  
    <View style={styles.mBackWrap}>
17.  
    <Icon name="arrow" style={styles.mBackIcon}></Icon>
18.  
    <Text style={styles.mBackText}>返回</Text>
19.  
    </View>
20.  
    </TouchableWithoutFeedback>
21.  
    )
22.  
    }

参考链接：

https://reactnavigation.org/docs/native-stack-navigator

https://chat.xutongbao.top/

这篇好文章是转载于：学新通技术网