如何使用 React Native 在 textInput 上添加渐变答案

【问题标题】：How to add gradient on the textInput using React Native如何使用 React Native 在 textInput 上添加渐变
【发布时间】：2022-08-13 06:49:17
【问题描述】：

我有 textInput 字段，我想在所有 4 个面上应用渐变，就像任何框上的边框一样。渐变确实部分应用，但它显示了一个奇怪的厚上边框，它甚至没有在盒子的所有 4 个边上显示它。此外，所有其他边都没有渐变。我正在尝试的代码是：

<View style={{ marginBottom: 20 }}>
  <Text
    style={[
      styles.firstNameLabel,
      firstNameError ? styles.errorColor : styles.inputLabelColor,
    ]}
  >
    First Name
  </Text>
  <LinearGradientView
     style={{ borderRadius: 5 }}
     colors={[\'rgba(9, 95, 216, 1)\', \'rgba(128, 69, 224, 1)\']}
     end={{
       x: 1.5,
       y: 2,
     }}
     start={{
       x: 1.2,
       y: 1.5,
     }}
   >
   <View
     style={{
       paddingHorizontal: 0,
       paddingVertical: 0,
       flex: 1,
       padding: 3,
     }}
   >
      <TextInput
        style={styles.firstNameInputField}
        mode=\"outlined\"
        theme={{
          colors: {
            text: \'#4D4D4D\',
            primary: \'transparent\',
          },
          roundness: 5,
        }}
        selectionColor=\"#095FD8FF\"
        outlineColor=\"#D7D7D7\"
      />
    </View>
  </LinearGradientView>
</View>

这是一个有问题的图像：

这是需要的

这看起来很有趣。伊玛试一试

标签： reactjs react-native dropdown gradient

【解决方案1】：

为了获得你想要的效果，你可以给 LinearGradient 一些填充作为边框宽度：

import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import Constants from 'expo-constants';
import {LinearGradient} from 'expo-linear-gradient'

export default function App() {
  const firstNameError = null;
  return (
    <View style={{ padding:8,marginBottom: 20 }}>
  <Text
    style={[
      styles.firstNameLabel,
      firstNameError ? styles.errorColor : styles.inputLabelColor,
    ]}
  >
    First Name
  </Text>
  <LinearGradient
     style={{ borderRadius: 5,padding:2 }}
     colors={['rgba(9, 95, 216, 1)', 'rgba(128, 69, 224, 1)']}
     end={{
       x: 1.5,
       y: 2,
     }}
     start={{
       x: 1.2,
       y: 1.5,
     }}
   >
   <View
     style={{
       paddingHorizontal: 0,
       paddingVertical: 0,
       flex: 1,
       padding: 3,
     }}
   >
      <TextInput
        style={styles.input}
        mode="outlined"
        theme={{
          colors: {
            text: '#4D4D4D',
            primary: 'transparent',
          },
          roundness: 5,
        }}
        selectionColor="#095FD8FF"
        outlineColor="#D7D7D7"
      />
    </View>
  </LinearGradient>
</View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  input: {
    backgroundColor:'white'
  },
});

【讨论】：