如何更改 TextInput 中的边框颜色答案

【问题标题】：How to Change the Border Color in TextInput如何更改 TextInput 中的边框颜色
【发布时间】：2019-06-29 20:14:23
【问题描述】：

我想在焦点之前更改此代码中的颜色或边框，我想要红色，焦点上我想要黄色。

这是我拥有的代码，我正在使用 React Native Paper https://callstack.github.io/react-native-paper/text-input.html

                <TextInput
                  label='Email or username'
                  mode='outlined'
                  theme={{ colors: { underlineColor:'red',}}}
                  style={(this.state.isFocused) ? {borderColor: 'black', borderColor: 'black',} : {fontStyle: 'italic', color: 'white'}} 
                  selectionColor='red'
                  underlineColor='red'
                  placeholder='name@example.com'
                  keyboardType='email-address'
                  underlineColorAndroid='transparent'
                  autoCorrect='false'
                  autoCapitalize='none'
                  onChangeText={formikProps.handleChange('email')}
                  onBlur={formikProps.handleBlur('email')}
                  //autoFocus
                />

我试过了，但它没有给我想要的东西 https://github.com/callstack/react-native-paper/issues/656

【问题讨论】：

请先尝试重置输入的样式。如果你谷歌输入重置样式，你可能会发现一些 css sn-ps。
谢谢，我会的，我想我找到了答案。我会尽快回答我的问题。

标签： react-native expo react-native-paper

【解决方案1】：

此代码在 TextInput 标记内工作。

theme={{ colors: { primary: 'green',underlineColor:'transparent',}}}

使用primary，您可以更改焦点上的边框颜色。参考： https://github.com/callstack/react-native-paper/issues/656

【讨论】：

我想保留，占位符的颜色与边框颜色不同，但这两者都会改变。你有什么解决办法吗？

【解决方案2】：

import { TextInput } from 'react-native-paper';


<TextInput
    style={{ marginHorizontal: 20 }}
    label='Mobile Otp  '
    mode='outlined'
    secureTextEntry={false}
    underlineColorAndroid={'rgba(0,0,0,0)'}
    text='white'
    direction='rtl'
    maxLength={6}        
    editable={true}
    onChangeText={(text) => { setMobileOtp(text) }}
    value={mobileOtp}
    defaultValue={mobileOtp}
    theme={styles.textInputOutlineStyle}
/>

const styles = StyleSheet.create({
     textInputOutlineStyle:{ 
       colors: { 
          placeholder: 'white', 
          text: 'white', primary: 'white',
          underlineColor:'transparent',    
          background : '#0f1a2b'
     }
  }
})

【讨论】：