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