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

Question

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

使用此代码：

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

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

Answer 1

您可以在 Stack.Navigator 中添加headerTintColor

<Stack.Screen name="YourPage" component={YourComponent}
    options={{ headerTintColor: '#ffffff'}}
/>

Answer 2

添加tintColor道具到HeaderBackButton

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

演示