如何在react native中处理导航中的searchbar onchangetext事件

Question

我想在react native中进行搜索活动。我在tabBottomNavigator中创建了一个堆栈导航，堆栈导航有导航选项和headerLeft选项。我有，和组件。我的问题是如何处理组件中的searchbar onchangetext事件，即使它在不同的类中也是如此。谢谢

StackForSearch.js

export default createStackNavigator({ Search:{ screen: Search,
navigationOptions: ({ navigation }) =>({
headerLeft: <SearchHeader navigation={navigation}/>,
}),
},});

SearchHeader.js

export default class SearchHeader extends Component<{}>{

render(){
return(
<View style={styles.Container} >
<SearchBar
containerStyle={{backgroundColor:'white', margin:0,padding:0,borderWidth:0,borderBottomWidth:0}}
inputStyle={{backgroundColor: 'white',paddingLeft:36,fontSize:16,color:'#171F33'}}
lightTheme
round
onChangeText={}
icon={{style:{color:'black', fontSize:22 ,margin:0}}}
placeholder='Search..' />
</View>
);
}
}
const styles = StyleSheet.create({
Container:{
flex:1
}
});

Search.js-我想处理Search.js 中的onChangeText事件

export default class Search extends Component<{}>{
constructor(props){
super(props);
}
render(){
return(
<View style={styles.Container}>
</View>
);
}
}
const styles = StyleSheet.create({
Container:{
flex:1,
},
StatusBar:{
marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight,
backgroundColor:'#171F33'
}
});

Answer 1

SearchHeader.js上SearchBar的函数onChangeText在每次Text更改时都会被激发。因此您可以将从Search.js传递的另一个函数作为道具传递给onChangeText属性。

1. 在SearchHeader.js中添加onChangeText={this.props.onChangeText}

2. 在Search.js中创建一个箭头函数，并将其作为道具传递给SearchHeader.js组件：

   export default class Search extends Component<{}>{    
   constructor(props){
   super(props);
   }
   onChangeText = (newText) => {
   //your custom logic here
   console.log(newText);
   }
   render(){    
   return(
   <View style={styles.Container}>
   <SearchHeader 
   onChangeText={this.onChangeText}
   />
   </View>
   );
   }
   }
   const styles = StyleSheet.create({
   Container:{
   flex:1,
   },
   StatusBar:{
   marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight,
   backgroundColor:'#171F33'
   }
   });