reactjs - React Native 搜索栏调度 API 调用

Question

我有多个选项卡，其中三个选项卡中有一个 FlatList 组件，我需要在其中搜索项目。现在在我的标题中，我想创建一个 SearchBar 并能够进行 API 调用以获取用户搜索的内容并在 FlatList 中显示结果。我正在使用 react-navigation/native ^5.7.1。

标签： reactjsreact-nativeexporeact-navigation

Answer 1

options您可以在道具中呈现自定义组件。更多细节在这里

function SearchBar() {
      const [value, onChangeText] = React.useState('Useless Placeholder');
      return (
       <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={text => onChangeText(text)}
        value={value}
       />
      );
    }

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <SearchBar {...props} /> }}
      />
    </Stack.Navigator>
  );
}