React Native 如何更改TextInput中的边框颜色

wxclj1h5 于 2023-05-18 发布在 React

关注(0)|答案(3)|浏览(197)

我想改变这个代码的颜色或边界之前的焦点我想要红色和焦点我想要黄色。
这是我的作品https://prnt.sc/o8evi5
这是我拥有的代码，我正在使用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

react-native

来源：https://stackoverflow.com/questions/56820591/how-to-change-the-border-color-in-textinput

3条答案

按热度按时间

7fhtutme1#

此代码在TextInput Tag中工作。

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

使用主色调，可以更改聚焦时的边框颜色。参考：https://github.com/callstack/react-native-paper/issues/656

赞(0）回复(0）举报 2023-05-18

kr98yfug2#

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'
     }
  }
})

赞(0）回复(0）举报 2023-05-18

1l5u6lss3#

<TextInput
        mode="outlined"
        placeholder={placeholder}
        // label={labelName}
        style={styles.input}
        // numberOfLines={1}
        {...rest}
        left={leftIcon ? left : null}
        right={rightIcon ? right : null}
        outlineColor={outlineColor || 'grey'}
        secureTextEntry={secureTextEntry} //It is used to give * to the field
        theme={{colors: {primary: 'orange'}}} //It is used to change the onFocus border color
      />

赞(0）回复(0）举报 2023-05-18

我来回答

React Native 如何更改TextInput中的边框颜色

3条答案

相关问题

热门标签

最新问答