样式化 NativeBase 输入答案

【问题标题】：Styling NativeBase Inputs样式化 NativeBase 输入
【发布时间】：2022-05-27 21:07:40
【问题描述】：

我想更改输入的边框大小、颜色等。出于某种原因，当我将 2 个输入堆叠在一起时，我将 marginTop 添加到下面的输入，或者尝试调整输入的大小，并且然后将它们在页面中居中，左侧或底部的边框消失。

<View style={styles.formAlign}>
    <Item regular style={styles.email}>
        <Input placeholder='Email' />
     </Item>
     <Item regular style={styles.password}>
         <Input placeholder='Password' />
     </Item>
</View>





email:{
   borderWidth:4,
   color:'red'
},
password:{

},
formAlign:{
    justifyContent:'center',
    alignItems:'center'
},

【问题讨论】：

标签： react-native native-base

【解决方案1】：

试了你的代码，修改了一下

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native'
import { Item, Input } from 'native-base';

export default class App extends Component {

  render() {
    return (
      <View style={styles.formAlign}>
        <Item style={styles.email}>
          <Input placeholder='Email' style={styles.input} />
        </Item>
        <Item style={styles.password}>
          <Input placeholder='Password' style={styles.input} />
        </Item>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  email: {
    width: 300,
  },
  password: {
    width: 300,
    marginTop: 15,
  },
  formAlign: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: 'blue'
  }
});

得到这个结果

【讨论】：

很好，我会试试的。我的解决方法是为每个输入添加边框宽度（顶部、底部、左侧、右侧）。
我明白了。您将边框放在输入上，而不是在项目上。并设置项目的宽度。

【解决方案2】：

_focus={{ 背景颜色：“灰色.200”，边框颜色：“无”， }}

如果您想在专注时进行更改，我认为这可能会有所帮助。将此添加为输入属性。

【讨论】：

【解决方案3】：

import React, { Component } from 'react';
import { Input, Button, Item, Text, Icon } from 'native-base';

export default class App extends Component{
    render(){
    return(
        <Item rounded style={styles.itemStyle}>
        <Icon active style={styles.iconstyle} name='navigate' />
            <Input keyboardType="default"
                getRef={(input) => this.nameInput = input}
                returnKeyType='next'
                placeholder="Enter Trip Name"
                placeholderTextColor="#FFFFFF"
                style={{ color: '#ffffff' }}
                onSubmitEditing={() => this._focusInput('dayInput')}
                value={this.state.tripName}
                defaultValue={this.state.tripName}
                onChangeText={tripName => this.setState({ tripName })} />
        </Item>
        )
    }
}

【讨论】：

也添加一些描述