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，并顯示搜索結果。