反应原生浮动文本输入样式

Question

大家好，我正在尝试使用这个包。它是这样工作的

我的代码

import {FloatingLabelInput} from 'react-native-floating-label-input';

//styled components Box=view
  <Box my={5} mx={20} bg={'#FFFFF'}>
             
              <FloatingLabelInput
                label={'password'}
                isPassword
                togglePassword={this.state.show}
                value={this.state.password}
                
                onChangeText={(password) => this.setState({ password })}

                customShowPasswordComponent={<ShowPw/>}
                customHidePasswordComponent={<HidePw/>}
            
              />
            </Box>

输出

完全没问题，但周围有一些白色边框。我想做成这样，这里也是图标，可以做，但是不能做边框

Answer 1

发生这种情况是因为在包本身内部，边框颜色设置为 #49658c

要解决此问题，请转到项目中的以下文件：

node_modules\react-native-floating-label-input\src\styles.tsx

将边框颜色更改为白色：

export const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    color: '#49658c',
    borderColor: '#ffffff',
    borderWidth: 2,
    borderRadius: 12,
    paddingHorizontal: 11,
    backgroundColor: '#00000000',
    paddingTop: 10,
    paddingBottom: 10,
    alignContent: 'center',
    justifyContent: 'center',
  },

//....

现在重新开始您的项目。

进行这些更改后的最终结果：