我在本机反应中创建了文本框,
但是我希望标签在 isFocused 或填充一些值时以动画形式出现在框外,例如:
如果值为空或为空框内的标签,否则在外面
我的代码是:
export default function InputBox(props) {
return (
<View style={styles.container}>
<Text style={styles.label}>{props.label}</Text>
<TextInput
style={styles.input}
autoCapitalize="none"
defaultValue={props.defaultValue}
onChangeText={props.onChangeText}
keyboardType={props.keyboardType}
editable={props.editable}
/>
</View>
);
}
风格 :
const styles = StyleSheet.create({
container: {
marginBottom: 20,
backgroundColor: COLORS.WHITE,
paddingTop: 5,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: COLORS.GREY_BORDER,
borderRadius: 2,
},
icon: {
width: 40,
justifyContent: 'center',
alignItems: 'center',
},
input: {
fontFamily: FONT_FAMILY.primaryMedium,
fontSize: 13,
height: 35,
color: COLORS.BLACK,
},
label: {
fontFamily: FONT_FAMILY.primary,
color: COLORS.GREY,
fontSize: 10,
},
});