React Native的导航栏搜索框实现

在React Native中，可以使用react-navigation库来实现导航栏搜索框。以下是一个简单的示例：

1. 首先，确保已经安装了react-navigation库及其相关依赖。如果尚未安装，可以使用以下命令进行安装：

npm install @react-navigation/native @react-navigation/stack

2. 创建一个SearchBar.js组件，用于实现搜索框：

import React, { useState } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';

const SearchBar = ({ onSearch }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = () => {
    onSearch(searchTerm);
  };

  return (
    <View style={styles.searchContainer}>
      <TextInput
        style={styles.searchInput}
        placeholder="搜索"
        value={searchTerm}
        onChangeText={setSearchTerm}
      />
      <Button title="搜索" onPress={handleSearch} />
    </View>
  );
};

const styles = StyleSheet.create({
  searchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    paddingHorizontal: 10,
  },
  searchInput: {
    flex: 1,
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginRight: 10,
    borderRadius: 4,
  },
});

export default SearchBar;

3. 在主组件（例如App.js）中，设置导航栏并使用SearchBar组件：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SearchBar from './SearchBar';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <SearchBar onSearch={(searchTerm) => navigation.navigate('Results', { searchTerm })} />
    </View>
  );
};

const ResultsScreen = ({ route }) => {
  const { searchTerm } = route.params;

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>搜索结果：{searchTerm}</Text>
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="首页" component={HomeScreen} />
        <Stack.Screen name="结果" component={ResultsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

现在，当用户在搜索框中输入文本并点击搜索按钮时，应用程序将导航到ResultsScreen，并显示搜索结果。