FairClip/memowake-front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 城市搜索卡顿

Browse Source
This commit is contained in:
jinyaqiu 2025-08-08 18:52:52 +08:00
parent 5653058bc1
commit 03b570450e
1 changed files with 38 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
app/(tabs)/top.tsx
View File

@ -28,6 +28,12 @@ interface LocationData {
export default function OwnerPage() { export default function OwnerPage() {
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const router = useRouter(); const router = useRouter();
const HOT_CITIES = [
['北京', '上海', '广州', '深圳'],
['杭州', '成都', '乌鲁木齐', '武汉'],
['西安', '重庆', '西宁', '哈尔滨'],
['长沙', '南宁', '贵阳', '昆明']
];
// 位置搜索数据 // 位置搜索数据
const [locationSearch, setLocationSearch] = useState(''); const [locationSearch, setLocationSearch] = useState('');
// 位置弹窗 // 位置弹窗
@ -166,6 +172,11 @@ export default function OwnerPage() {
}; };
}, [fetchLocationData]); }, [fetchLocationData]);
useEffect(() => {
// console.log(locationData);
}, [locationSearch])
return ( return (
<TouchableWithoutFeedback onPress={() => { <TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss(); Keyboard.dismiss();
@ -211,9 +222,8 @@ export default function OwnerPage() {
onChangeText={setLocationSearch} onChangeText={setLocationSearch}
value={locationSearch} value={locationSearch}
placeholder="输入城市名进行搜索" placeholder="输入城市名进行搜索"
onEndEditing={() => { onEndEditing={(text) => {
console.log('输入完成'); setLocationSearch(text.nativeEvent.text)
// 在这里执行搜索或其他操作
}} }}
/> />
</View> </View>
@ -233,30 +243,24 @@ export default function OwnerPage() {
{/* 热门城市 */} {/* 热门城市 */}
<View style={styles.hotCity}> <View style={styles.hotCity}>
<ThemedText size="base" color="textSecondary" style={{ marginBottom: 16 }}>热门城市</ThemedText> <ThemedText size="base" color="textSecondary" style={{ marginBottom: 16 }}>热门城市</ThemedText>
<View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', marginBottom: 16 }}> {HOT_CITIES.map((row, rowIndex) => (
<ThemedText style={styles.item}>北京</ThemedText> <View
<ThemedText style={styles.item}>上海</ThemedText> key={`row-${rowIndex}`}
<ThemedText style={styles.item}>广州</ThemedText> style={[styles.cityRow, rowIndex === HOT_CITIES.length - 1 && { marginBottom: 0 }]}
<ThemedText style={styles.item}>深圳</ThemedText> >
</View> {row.map((city, cityIndex) => (
<View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', marginBottom: 16 }}> <ThemedText
<ThemedText style={styles.item}>杭州</ThemedText> key={`${city}-${cityIndex}`}
<ThemedText style={styles.item}>成都</ThemedText> style={styles.item}
<ThemedText style={styles.item}>乌鲁木齐</ThemedText> onPress={() => {
<ThemedText style={styles.item}>武汉</ThemedText> setLocationSearch(city);
</View> }}
<View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', marginBottom: 16 }}> >
<ThemedText style={styles.item}>西安</ThemedText> {city}
<ThemedText style={styles.item}>重庆</ThemedText> </ThemedText>
<ThemedText style={styles.item}>西宁</ThemedText> ))}
<ThemedText style={styles.item}>哈尔滨</ThemedText> </View>
</View> ))}
<View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}>
<ThemedText style={styles.item}>长沙</ThemedText>
<ThemedText style={styles.item}>南宁</ThemedText>
<ThemedText style={styles.item}>贵阳</ThemedText>
<ThemedText style={styles.item}>昆明</ThemedText>
</View>
</View> </View>
</View> </View>
@ -312,7 +316,6 @@ const styles = StyleSheet.create({
borderRadius: 24, borderRadius: 24,
paddingLeft: 40, // 给图标留出空间 paddingLeft: 40, // 给图标留出空间
paddingVertical: 8, paddingVertical: 8,
color: '#4C320C',
paddingRight: 16, paddingRight: 16,
fontSize: 14, fontSize: 14,
lineHeight: 16, lineHeight: 16,
@ -337,5 +340,12 @@ const styles = StyleSheet.create({
backgroundColor: "#FBFBFB", backgroundColor: "#FBFBFB",
padding: 16, padding: 16,
borderRadius: 24 borderRadius: 24
},
cityRow: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
marginBottom: 16
} }
}); });