具有borderRadius且具有连接视图的TextField

Question

我的问题是我正在尝试创建一个textField，它具有将验证消息附加到组件的功能。但是，我的问题是TextField是透明的，带有边框+半径。但是通知消息将无缝地附加到textField。

我的TextField的结构

const containerStyle = {
        height: 50,
        marginVertical: 10,
        borderWidth: 1,
        borderRadius: 10,
        borderColor: this._animatedIsFocused.interpolate({
            inputRange: [0, 1],
            outputRange: [colors.OUTER_SPACE, colors.PLATINUM]
        })
    }
    const labelStyle = {
        position: 'absolute',
        left: 15,
        top: this._animatedIsFocused.interpolate({
            inputRange: [0, 1],
            outputRange: [15, 8]
        }),
        fontSize: this._animatedIsFocused.interpolate({
            inputRange: [0, 1],
            outputRange: [12, 10]
        }),
        color: this._animatedIsFocused.interpolate({
            inputRange: [0, 1],
            outputRange: [colors.OUTER_SPACE, colors.PLATINUM]
        })
    }
    const inputStyle = {
        position: 'absolute',
        left: 0,
        width: '100%',
        height: 50,
        top: this._animatedIsFocused.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 5]
        }),
        paddingHorizontal: this._animatedIsFocused.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 15]
        })
    }

<Animated.View style={containerStyle}>
                <Animated.Text style={labelStyle}>{label}</Animated.Text>
                <Animated.View style={inputStyle}>
                    <TextInput {...props} style={styles.input} autoCorrect={false} onFocus={this.handleFocus} onBlur={this.handleBlur} />
                </Animated.View>
                <View style={styles.bottomLeft} />
                <View style={styles.bottomRight} />
</Animated.View>

Answer 1

您必须使用以下方法将borderRadius: 10上的containerStyle分成每个单独的角：

• borderBottomLeftRadius：数字
• borderBottomRightRadius：数字
• borderTopLeftRadius：数字
• borderTopRightRadius：数字

然后在出现错误时将0的底部放在两个角。

然后在容器的最后添加错误框

<View style={styles.errorContainer}><Text>Some error</Text></View>

并用相反的角样式设置errorContainer的样式。 0代表两个顶部角落，10代表底部两个角落。