有没有办法更改 IOS header 上的反应导航默认后退按钮颜色？

Question

static navigationOptions = {
    headerTitle:'Booking',
    headerTitleStyle: {color:'white'},
    headerStyle: {backgroundColor:'orange'}
  }

我的 header 看起来像这样。我想更改 IOS 上默认后退按钮图标的颜色。我可以更改标题的颜色，但没有更改图标颜色的选项。我想知道是否有办法更改颜色或实现我自己的 headerLeft 属性是更好的选择？

Answer 1

navigationOptions中有一个属性 headerTintColor可以用来改变后退按钮图标的颜色

static navigationOptions = {
    headerTitle:'Booking',
    headerTitleStyle: {color:'white'},
    headerStyle: {backgroundColor:'orange'},
    headerTintColor: 'blue'
  }

参考：https://reactnavigation.org/docs/navigators/stack#headerTintColor

Answer 2

通过以下代码设置导航选项按钮的样式：

static navigationOptions = ({ navigation }) => {
        const { navigate } = navigation
        return{
            title: 'Review Jobs',
            headerRight:() =>{ 
                return(
                    <Button title='Settings' 
                        onPress = { ()=>{navigate('setting')}}
                        titleStyle = {{
                        color : "rgba(0,122,255,1)"
                        }}
                        buttonStyle= {{backgroundColor : "rgba(0,0,0,0)",}}
                    /> 
                )
            },
            headerTitleStyle: {
                backgroundColor : "rgba(0,0,0,0)",
                        color : "rgba(0,122,255,1)"
            }
        }
    }

Answer 3

我的解决方案是更新反应导航的主题： https://reactnavigation.org/docs/themes/

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
  },
};

export default function App() {
  return (
    <NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>
  );
}

因此，您的默认后退按钮颜色为 rgb(255, 45, 85)

Answer 4

我正在使用 react navigation v6，我的解决方案是这样的：

<Stack.Screen
    name="OlvidoContraseña"
    component={OlvidoContraseñaScreen}
     options={{headerTransparent: true,
     headerTitle:'Inicio',
     headerTintColor:
        theme.colors.greenHigh  
    }}
/>

有没有办法更改 IOS header 上的反应导航默认后退按钮颜色？

Is there a way to change react navigation's default back button Color on IOS header?

react-native

react-navigation