我们如何过滤来自onChangeText上的标题文本输入的数据in react native？

Question

我有自定义标头，其中有TextInput用于在StackNavigator中搜索。如何在特定类的TextInput的onChangeText上获得结果，这里是demo：

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

Answer 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
  }) />