React中Stack Navigator栈导航器的返回按钮图标及颜色如何修改？

你可以通过headerLeft配置项自定义返回区域的内容，以下分两种场景给出实现代码：

• 单页面单独配置（仅修改Bone cancer页面的返回图标）
  你需要先引入对应图标库（以react-native-vector-icons/Ionicons为例，你也可以替换为自定义图标组件），修改后的页面配置如下：

import Ionicons from 'react-native-vector-icons/Ionicons';

<Stack.Screen
    name="Bone cancer" component={BoneCancerScreen}
    options={({navigation}) => ({
        headerStyle: {
            backgroundColor: "#000000",
            height: RFValue(102)
        },
        headerTintStyle: {fontWeight: "bold"},
        headerTitleStyle: {
            marginLeft: RFValue(72),
            fontFamily: "Aldrich-Regular",
            color: "white"
        },
        // 自定义返回图标
        headerLeft: () => (
            <Ionicons 
                name="home" // 替换为你要的图标名
                size={24} 
                color="#fff" // 这里修改图标颜色
                style={{marginLeft: 16}}
                onPress={() => navigation.goBack()} // 返回上一级，要跳首页可以修改为navigation.navigate('Home screen')
            />
        )
    })}
/>

• 全局统一配置（所有栈页面的返回图标都替换）
  直接修改Stack.Navigator的screenOptions配置即可：

import Ionicons from 'react-native-vector-icons/Ionicons';

<Stack.Navigator
    initialRouteName="Home screen"
    screenOptions={({navigation}) => ({
        headerShown: true,
        headerLeft: () => (
            <Ionicons 
                name="home" 
                size={24} 
                color="#fff" 
                style={{marginLeft: 16}}
                onPress={() => navigation.goBack()}
            />
        )
    })}>

补充说明：如果需要统一设置头部所有文本和图标颜色，也可以在配置中添加headerTintColor: '你要的颜色'属性，无需单独给图标设置color。

内容的提问来源于stack exchange，提问作者George542