我们如何在反应原生中从 onChangeText 上的标题 TextInput 过滤数据？答案

【问题标题】：How can we fliter data from header's TextInput on onChangeText in react native?我们如何在反应原生中从 onChangeText 上的标题 TextInput 过滤数据？
【发布时间】：2019-03-06 06:24:11
【问题描述】：

我有自定义标题，它有 TextInput 用于在 StackNavigator 中搜索。我如何在特定类的 TextInput 的 onChangeText 上获得结果，这是演示：

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
    }   }, } )

【问题讨论】：

你想在哪里显示结果？
我想要有多个标签的“TabNav”屏幕上的结果。我只想获取当前标签的实时 onChangeText 值。

标签： javascript android reactjs react-native react-navigation

【解决方案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
  }) />

【讨论】：

谢谢，但我必须在选项卡中使用 loadUsers() 方法，我只想知道如何更改放置在 createStackNavigator 中的 Header 的 TextInput 的 onChangeText 屏幕文本
@civanimahida 我认为没有任何方法可以直接将数据从 StackNavigator 更改为特定屏幕。你需要在屏幕上有标题。
我无法使用“navigationOptions”在标签页中设置标题。实际上我想在 Instagram 等多个标签中进行搜索。还有其他方法可以在多个标签中进行搜索吗？
嗯，Instagram 有一个特定的搜索标签，你已经看过了。为此，您不需要将标题放在 navigationOption 中，而是将其作为将呈现在标签栏屏幕中的普通组件。