Javascript 自定义Textinput在IOS中显示其周围的边框-React Native

我已经为我的react本机应用程序创建了一个自定义文本输入组件。它在android构建中没有问题。但在IOS中，自定义组件在其视图周围绘制边框

这就是它在ios中的外观。你可以看到它周围的边界

我想让它在IOS中看起来像这样，没有正方形边框

这是我的自定义组件（MyInput.js）

import React，{useState，useRef，useffect}来自'React'；
进口{
有生气的
文本，
活动指示器，
可触摸不透明度，
}从“反应本机”；
const{View，TextInput，StyleSheet}=require（'react-native'）；
常量MyInput=（道具）=>{
const[hide，makeHide]=useState（false）；
const[phAanimatedValue]=useState（新的Animated.Value（0））；
const[LabelAnimatedValue]=useState（新的动画值（0））；
const[overflow，setOverflow]=useState（'hidden'）；
const moveplaceholder left=phAanimatedValue.interpolate({
输入范围：[0，1]，
输出范围：[0，-10]，
});
const moveLabelRight=LabelAnimatedValue.interpolate({
输入范围：[0，1]，
输出范围：[-10,0]，
});
常量animatePlaceHolder=（v，隐藏）=>{
动画。计时（PhanimatedValue{
toValue:v，
持续时间：50，
useNativeDriver：没错，
}).start（（）=>{
makeHide（隐藏）；
animateLabel（v）；
});
};
常量animateLabel=（v）=>{
setOverflow（“可见”）；
动画。计时（LabelAnimatedValue{
toValue:v，
持续时间：50，
useNativeDriver：没错，
}).start（）；
};
返回(
{
animatePlaceHolder（1，正确）；
}}
ref={props.cref}
value={props.value}
onChangeText={（v）=>props.onChangeText（v）}
style={{paddingStart:25}}
onBlur={（）=>{
如果（props.value.length>0）{
makeHide（真）；
}否则{
animatePlaceHolder（0，false）；
}
}}
/>
{！躲起来(
props.cref.current.focus（）}
风格={{
位置：'绝对'，
转换：[{translateX:moveplaceholder left}]，
高度：“100%”，
fontFamily:“Muli Regular”，
宽度：“100%”，
玛格丽特：20，
填充垂直：15，
颜色：props.error？“#ff0033”：“#A6”，
textAlignVertical:'中心'，
}}>
{props.label}
) : (
props.cref.current.focus（）}
风格={{
位置：'绝对'，
转换：[{translateX:moveLabelRight}]，
玛金托普：-10，
zIndex:1000，
背景颜色：“白色”，
颜色：道具。错误？'red'：'e5deda'，
玛格丽特：20，
fontFamily:“Muli Regular”，
填充水平面：5，
textAlignVertical:'顶部'，
}}>
{props.label}
)}
);
};
const styles=StyleSheet.create({
输入：{
边界宽度：2，
边框颜色：“#e5deda”，
背景颜色：“白色”，
尺寸：14，
颜色：“353839”，
填充垂直：15，
marginHorizontal:20，
线高：18，
fontFamily:“Muli Regular”，
重量：'600'，
边界半径：100，
},
});
导出默认MyInput；

我是这样渲染的：

<MyInput
          value={value}
          onChangeText={(v)=>
          {
          setValue(v)
          setError(true)
          }}
          cref={postalRef}
          error={error}
          label="Postal Code"
        />

{
设定值（v）
设置错误（真）
}}
cref={postalRef}
错误={error}
label=“邮政编码”
/>

---

是否有任何解决方案，或者这是一个bug？

是否有人可以检查这个问题是否出现在您的模拟器/iPhone中，以及为什么这个问题只出现在ios设备上，而不是android设备上？通过移除溢出来修复，并且在ios中运行良好。嗯，buggy React native。有人能检查一下这个问题是否出现在你的模拟器/iPhone中，为什么这个问题只出现在ios设备而不是android设备中？通过移除溢出修复，在ios中效果良好。哈，巴吉。

<MyInput
          value={value}
          onChangeText={(v)=>
          {
          setValue(v)
          setError(true)
          }}
          cref={postalRef}
          error={error}
          label="Postal Code"
        />