React Native 搜索栏调度 API 调用

【问题标题】：React Native search bar dispatch API callReact Native 搜索栏调度 API 调用
【发布时间】：2020-10-23 16:10:45
【问题描述】：

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

【问题讨论】：

标签： reactjs react-native expo react-navigation

【解决方案1】：

您可以在 options 属性中渲染自定义组件。 More details here

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

【讨论】：

@stefan0905 如果这回答了您的问题。请接受它作为答案，以便对其他人有所帮助！