Не можете изменить заголовок заголовка на InputText?

Question

Я пытаюсь изменить заголовок заголовка на TextInput, однако ничего не получаю. Я пытаюсь сделать что-то вроде этого

setHeader(){
    this.props.navigation.setOptions({
      headerTitle: <TextInput style={styles.searchInput}/>
    });
  }

Если я изменить TextInput просто текст, то это работает. Тем не менее, я хочу TextInput

Любая помощь будет оценена.

Спасибо!

РЕДАКТИРОВАТЬ 1 Я заметил, что это работает, но каждый раз, когда я печатаю, клавиатура отключается.

<SearchStack.Screen 
      name = "Search" component = {Search}
      options={{
       title: <TextInput placeholder="hiasdfadsf"/>,
      cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid,
      headerBackTitleVisible: false , headerTintColor: "black"}} />

Мне интересно, почему это работает, но не работает при использовании setOptions?

Answer 1

Вы должны использовать опцию заголовка вместо headerTitle для определения пользовательского заголовка. даже если вы хотите использовать headerTitle, вы должны передать ему функцию вместо компонента, попробуйте это

setHeader(){
    this.props.navigation.setOptions({
      header: () => <TextInput style={styles.searchInput}/>
    });
  }

Answer 2

Вы можете использовать <Text> в headerTitle только в NavigationOptions. По умолчанию он не принимает никаких других элементов.

Вы можете использовать опцию header и создать свой собственный заголовок, в котором вы можете использовать <TextInput/>

Пример:

     this.props.navigation.setOptions = () =>
           return {
              header: (
              <View style={{width: '100%', height: 60}}>
                 <TextInput style={styles.searchInput}/>
              </View>
              )
            }
        };