Question

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

我的标题看起来像这样。我想更改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

要通过以下代码设置NavigationOptions按钮的样式：

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)

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

3 个答案: