React native React Native中TextInput上的线性渐变边框颜色

我是英语初学者。这里我想在TextInput上创建一个线性渐变borderColor，如何实现它

<View >
    <TextInput
        style={{fontSize: 16, color: '#000', borderWidth: 5}}
    />
</View>

---

在react native中无法使边框颜色渐变。但您可以通过创建自定义TextInput组件来实现相同的功能，该组件将被渲染到渐变背景视图中（您可以使用创建它），并具有一些填充，因此看起来TextInput具有边框。例如：

MyInput.js

<LinearGradient
  colors={['#4c669f', '#3b5998', '#192f6a']}
  style={{padding: 2}} // add padding so it work as border of TextInput
  ..
  ..
>
  <TextInput
  ..
  ..
  />
</LinearGradient>

react native的

组件。根据需要设置子视图

import React，{Component}来自'React'；
从“react native”导入{文本、视图、样式表、TouchableOpacity}；
从“反应本机线性渐变”导入LinearGradient；
导出默认类应用程序扩展组件{
render（）{
返回(
登录
);
}
}
const styles=StyleSheet.create({
容器：{
flex:1.0，
为内容辩护：“中心”，
背景颜色：“#ecf0f1”，
},
格雷迪安：{
身高：44，
宽度：300，
为内容辩护：“中心”，
自我定位：“中心”
},
按钮容器：{
flex:1.0，
对齐自我：“中心”，
为内容辩护：“中心”，
背景颜色：“#ffffff”，
宽度：“99%”，
保证金：1
},
按钮文字：{
textAlign:'中心'，
颜色：“#4C64FF”，
对齐自我：“中心”，
}
});

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <LinearGradient
                    colors={['#00FFFF', '#17C8FF', '#329BFF', '#4C64FF', '#6536FF', '#8000FF']}
                    start={{ x: 0.0, y: 1.0 }} end={{ x: 1.0, y: 1.0 }}
                    style={styles.grediant}
                >
                    <TouchableOpacity style={styles.buttonContainer}>
                        <Text style={styles.buttonText}>
                            LOGIN
                         </Text>
                    </TouchableOpacity>
                </LinearGradient>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1.0,
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
    },
    grediant: {
        height: 44,
        width: 300,
        justifyContent: 'center',
        alignSelf: 'center'
    },
    buttonContainer: {
        flex: 1.0,
        alignSelf: 'center',
        justifyContent: 'center',
        backgroundColor: '#ffffff',
        width: '99%',
        margin: 1
    },
    buttonText: {
        textAlign: 'center',
        color: '#4C64FF',
        alignSelf: 'center',
    }
});