Question

我已经修改了导航栏中后退按钮的标准行为

使用此代码：

export class QuranSouratesPage extends React.Component{
  static navigationOptions =({ navigation }) => ({
    title: 'Le noble Coran',
    headerLeft: <HeaderBackButton onPress={() => {navigation.navigate('SearchPage')}}/>,
});

现在，除了箭头的颜色变为黑色外，我的行为正确，我想找到一种方法来更改我尝试使用tintColor设置样式的箭头的颜色，但没有结果。

Answer 1

将tintColor道具添加到HeaderBackButton

export class QuranSouratesPage extends React.Component{
  static navigationOptions =({ navigation }) => ({
    title: 'Le noble Coran',
    headerLeft: <HeaderBackButton tintColor={'white'} onPress={() => {navigation.navigate('SearchPage')}}/>,
});

Demo

Answer 2

您可以在 Stack.Navigator 中添加 headerTintColor

<Stack.Screen name="YourPage" component={YourComponent}
    options={({ navigation, route }) => ({
        title: 'YourTitle',
        headerTintColor: '#ffffff',
        headerTitle: props => <NavBar  {...props} />,
        headerStyle: {height:80},
    })} 
/>

更改导航标题中后退箭头的颜色

2 个答案: