样式化 NativeBase 输入

Question

我想更改输入的边框大小、颜色等。出于某种原因，当我将 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'
},

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

得到这个结果

Answer 2

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

Answer 3

_focus={{ 背景颜色：“gray.200”， borderColor: "none", }}

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

样式化 NativeBase 输入

Styling NativeBase Inputs

react-native

native-base