46 lines
1021 B
TypeScript
46 lines
1021 B
TypeScript
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
|
|
import { StyleSheet, TextInput, View } from "react-native";
|
|
|
|
type ConversationSearchBarProps = {
|
|
value: string;
|
|
onChangeText: (value: string) => void;
|
|
};
|
|
|
|
export function ConversationSearchBar({
|
|
value,
|
|
onChangeText,
|
|
}: ConversationSearchBarProps) {
|
|
return (
|
|
<View style={styles.wrapper}>
|
|
<MaterialIcons color="#A2A2A7" name="search" size={28} />
|
|
<TextInput
|
|
onChangeText={onChangeText}
|
|
placeholder="搜索联系人备注/昵称/ID"
|
|
placeholderTextColor="#B8B8BC"
|
|
style={styles.input}
|
|
value={value}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrapper: {
|
|
alignItems: "center",
|
|
backgroundColor: "#F0F0F2",
|
|
borderCurve: "continuous",
|
|
borderRadius: 20,
|
|
flexDirection: "row",
|
|
gap: 8,
|
|
height: 52,
|
|
marginHorizontal: 20,
|
|
paddingHorizontal: 16,
|
|
},
|
|
input: {
|
|
color: "#2A2A2A",
|
|
flex: 1,
|
|
fontSize: 16,
|
|
fontWeight: "400",
|
|
},
|
|
});
|