/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React, {useState} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Alert,
TextInput,
Button,
LayoutAnimation,
TouchableOpacity,
} from 'react-native';
const App = () => {
const [expanded, setExpanded] = useState(false);
const [value, changeValue] = useState('');
const hide = val => {
setExpanded(false);
changeValue(val);
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.search}>
<TextInput
style={styles.inputStyle}
returnKeyType="search"
placeholder="请输入关键字"
value={value}
onChangeText={value => {
changeValue(value);
setExpanded(true);
}}
/>
<View style={styles.btnStyle}>
<Text style={styles.searchText}>搜索</Text>
</View>
</View>
{expanded ? (
<TouchableOpacity style={styles.result} onPress={() => hide(value + '大街')}>
<Text style={styles.item}>
{value}大街
</Text>
</TouchableOpacity>
) : null}
{expanded ? (
<TouchableOpacity style={styles.result} onPress={() => hide(value + '车站')}>
<Text style={styles.item}>{value}车站</Text>
</TouchableOpacity>
) : null}
{expanded ? (
<TouchableOpacity style={styles.result} onPress={() => hide(value + '机场')}>
<Text style={styles.item}>{value}机场</Text>
</TouchableOpacity>
) : null}
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
},
search: {
width: 400,
height: 32,
flexDirection: 'row',
flexWrap: 'nowrap',
margin: 0,
padding: 0,
},
inputStyle: {
flex: 8,
height: 32,
fontSize: 16,
borderColor: 'rgba(0,0,0,.2)',
borderWidth: 1,
borderRightWidth: 0,
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
marginLeft: 20,
paddingLeft: 5,
},
btnStyle: {
flex: 2,
height: 32,
justifyContent: 'center',
alignItems: 'center',
marginRight: 20,
backgroundColor: '#FFD700',
borderColor: 'rgba(0,0,0,.2)',
borderWidth: 1,
borderTopRightRadius: 5,
borderBottomRightRadius: 5,
},
searchText: {
fontSize: 16,
color: '#fff',
},
result: {
width: 360,
height: 32,
justifyContent: 'center',
borderColor: 'rgba(0,0,0,.2)',
borderWidth: 1,
borderTopWidth: 0,
marginLeft: 20,
marginRight: 20,
},
item: {
fontSize: 16,
paddingLeft: 5,
},
});
export default App;
React Native - 关键词搜索框
最新推荐文章于 2024-04-23 14:19:31 发布