Как мы можем перенести данные из TextInput заголовка в onChangeText в react native?

#javascript #android #reactjs #react-native #react-navigation

#javascript #Android #reactjs #react-native #реакция-навигация

Вопрос:

У меня есть пользовательский заголовок, в котором есть TextInput для поиска в StackNavigator.Как я могу получить результат для onChangeText TextInput для определенного класса, вот демо:

 const StackNavigator = createStackNavigator({
 TABS: {
    screen: TabNav,
    navigationOptions: ({ navigation }) => {
      return {
        header:
          <View style={{ backgroundColor: '#025281', flexDirection: 
         'row', alignItems: 'center', height: 60 }}>
            <TouchableOpacity
              style={{ paddingLeft: 5 }}>
              <Image source={require(back_arrowimg)} style={{ 
                width: 25, height: 25, resizeMode: 'contain' }}/>
            </TouchableOpacity>
    <TextInput
              style={{ color: 'white', paddingLeft: 15, }}
              type='text'
              placeholder={headerTitle}
              onChangeText={this.loadUsers}
            />
          </View>,
      }
    }   },

  [ConstFile.SCREEN_TITLES.WELCOME_SEARCH]: {
    screen: WELCOMESEARCH,
    navigationOptions: {
      header: null
    }   }, } )

1. и где вы хотите показать результаты?

2. Я хочу результаты на экране «TabNav», который имеет несколько вкладок. Я просто хочу получить значение onChangeText в реальном времени для текущей вкладки.

Ответ №1:

с navigationOption вы ничего не можете сделать с другим экраном,

итак, что вы можете сделать, это переместить код вашего заголовка в другой файл и использовать его как компонент в TabNav

что-то вроде этого, допустим Header.js

 <View style={{ backgroundColor: '#025281', flexDirection: 
         'row', alignItems: 'center', height: 60 }}>
    <TouchableOpacity
              style={{ paddingLeft: 5 }}>
          <Image source={require(back_arrowimg)} style={{ 
                width: 25, height: 25, resizeMode: 'contain' }}/>
    </TouchableOpacity>
    <TextInput
              style={{ color: 'white', paddingLeft: 15, }}
              type='text'
              placeholder={headerTitle}
              onChangeText={this.props.loadUsers} // see this change
            />
</View>

и в вашем TabNav.js использовать заголовок в качестве компонента,

 <Header 
  loadUsers={(...your params)=>{
    //do your necessary stuffs to display data in this file
  }) />

1. Спасибо, но я должен использовать метод loadUsers () во вкладках, я только хочу знать, как можно изменить текст экрана onChangeText на TextInput заголовка, который размещен в createStackNavigator

2. @civanimahida Я не думаю, что существует какой-либо метод, который может напрямую изменять данные из StackNavigator на конкретный экран. У вас должен быть заголовок на экране.

3. я не могу устанавливать заголовки на страницах вкладок с помощью «navigationOptions». На самом деле я хочу выполнить поиск на нескольких вкладках, таких как Instagram. Есть ли другой способ поиска на нескольких вкладках?

4. Ну, Instagram имеет одну конкретную вкладку для поиска, вы ее видели. И для этого вам не нужно вставлять заголовок navigationOption , а как обычный компонент, который будет отображаться на вашем экране панели вкладок.