Блог

У меня есть несколько вкладок, где в трех из них есть компонент FlatList, где мне нужно иметь возможность искать элементы. Теперь в моем заголовке я хочу создать панель поиска и иметь возможность вызывать API, чтобы получить то, что искал пользователь, и отобразить результат (ы) в FlatList. Я использую react-navigation / native ^ 5.7.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>
  );
}