React native 在react native中单击TextInput时切换视图

我有一个

TextInput

，我有一个视图，使文本位于

TextInput

的上边框之间，如下图所示

下面是我的代码：

import React from "react";
import { View, Text, StyleSheet, TextInput } from "react-native";

const AddAddressScreen = () => {
    return (
        <View style={styles.TextInputcontainer}>
            <View style={styles.TextInputlabelContainer}> // this should toggle when clicked in and out of TextInput
                <Text style={styles.labelText}>Search</Text>
            </View>
            <TextInput style={styles.textSearchInput} selectionColor={"black"} placeholder="Search" />
        </View>
    );
}
const styles = StyleSheet.create({
    TextInputcontainer: {
        height: 50, width: 200, marginTop: 50,
    },
    TextInputlabelContainer: {
        position: 'absolute',
        backgroundColor: '#fff',
        top: -10.5, left: 20, zIndex: 1,
    },
    labelText: {
        color: "black",
    },
    textSearchInput: {
        flex: 1,
        borderWidth: 1, borderColor: "#9E9E9E",
        color: "#9E9E9E"
    },
});
export default AddAddressScreen;

从“React”导入React；
从“react native”导入{View，Text，StyleSheet，TextInput}；
常量AddAddressScreen=（）=>{
返回(
//当在文本输入和文本输入中单击时，应切换此选项
搜索
);
}
const styles=StyleSheet.create({
TextInputcontainer：{
高度：50，宽度：200，边缘：50，
},
TextInputlabelContainer：{
位置：'绝对'，
背景颜色：“#fff”，
顶部：-10.5，左侧：20，zIndex:1，
},
标签文本：{
颜色：“黑色”，
},
文本搜索输入：{
弹性：1，
borderWidth:1，borderColor:#9E9E9E“，
颜色：“9E9E9E”
},
});
导出默认地址屏幕；

有一个带有

样式的视图。TextInputlabelContainer

，我也在那个地方写了评论。

---

我希望只有当用户单击

TextInput

时，才能看到

视图。我仍处于react native的学习阶段，因此我无法思考如何做到这一点。
尝试使用TextInput中的onFocus和onBlur方法：

您也可以从下面的链接获得参考
使用
onFocus
和
onBlur
道具设置可见性状态，并使用该状态显示或隐藏
TextInput
标签

工作示例：


解决方案：

import React，{useState，}来自'React'；
从“react native”导入{View，Text，StyleSheet，TextInput}；
常量AddAddressScreen=（）=>{
const[showLabel，setShowLabel]=useState（false）；
返回(
{showLabel&&(
搜索
)}
{
设置标签（真）；
}}
onBlur={（）=>{
设置标签（假）；
}}
/>
);
};
const styles=StyleSheet.create({
TextInputcontainer：{
身高：50，
宽度：200，
玛金托普：50，
},
TextInputlabelContainer：{
位置：'绝对'，
背景颜色：“#fff”，
前-10.5，
左:20,，
zIndex:1，
},
标签文本：{
颜色：'黑色'，
},
文本搜索输入：{
弹性：1，
边框宽度：1，
边框颜色：“#9E9E9E”，
颜色：“#9E9E9E”，
},
});
导出默认地址屏幕；