样式化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>

)
}
    }