Question

我有一个自定义标头，其中包含用于在StackNavigator中搜索的TextInput。如何在特定类的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
    }   }, } )

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

我们如何在响应本机中从onChangeText的标头的TextInput过滤数据？

1 个答案: