React Navigation 5 - Native Stack Navigator с настраиваемым заголовком, который имеет панель поиска

Question

Я сейчас нахожусь в проекте, для которого мы используем React Navigation 5 с собственным навигатором стека из-за его повышенной производительности. Нам нужно добавить панель поиска в заголовок, потому что клиенту не понравится, что он где-то еще. Есть ли способ сделать пользовательский заголовок? использование options = {{headerShown: false}} не является опцией, поскольку внутри навигатора стекового стека у нас есть навигатор нижнего стека, а внутри навигатора нижней вкладки у нас есть навигатор верхнего стека с экранами внутри него. Поэтому использование headerShown: false и пользовательский заголовок внутри экранов будут отображать его только под верхними вкладками, и это будет неприемлемо. Есть идеи как это сделать? использует навигатор общего стека с настраиваемым элементом реагирования в качестве заголовка единственное решение?

Буду признателен за любые идеи, как решить эту проблему.

Answer 1

pass navigationOptions в вашем компоненте

export default class Test extends Component{

    static navigationOptions = ({ navigation }) => ({
        headerTitle: "Test",
        headerStyle: {
          backgroundColor: #f1f1f1,
          elevation: 0
        },
        headerTintColor: "#000",
      });

    render(){
        return(<View><Text>Test App</Text></View>);
    }
}

Answer 2

Решено с использованием опции headerRight и передачей полного пользовательского компонента заголовка.

Answer 3

взгляните на https://reactnavigation.org/docs/en/stack-navigator.html Вы можете передать header в options реквизит и использовать собственный заголовок.