React-Native 有边框的文本输入？答案

【问题标题】：React-Native bordered text input?React-Native 有边框的文本输入？
【发布时间】：2017-09-03 02:23:23
【问题描述】：

我正在尝试在 React Native 上创建一个如下所示的登录表单：

我在创建带有实线边框的 Form/TextInput 时遇到问题（不用担心其他 CSS 样式。我只需要获得实线边框。）

进口：

import { View, Text, TextInput } from 'react-native';
import { FormLabel, FormInput } from 'react-native-elements';
import { Container, Header, Content, Form, Item, Input, Label, Button } from 'native-base';

这是风格：

const styles = {
  container: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex',
  },
  loginSquare: {
    backgroundColor: '#FFFFFF',
    height: 300,
    width: 300,
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  loginHeader: {
    backgroundColor: '#660008',
    width: '100%',
    height: 75
  },
  loginText: {
    color: '#FFFFFF'
  },
  loginForm: {
    width: 250,
    height: 50
  },
  loginButton: {
    backgroundColor: '#660008'
  },
  loginForm: {
    height: 75,
    marginLeft: 25,
    marginRight: 25,
    borderColor: 'gray'
  }
}

和代码：

render(){
    return (
    <View style={styles.container}>
      <View style={styles.loginSquare}>
        <View style={styles.loginHeader}>
          <Text style={styles.loginText}>Login</Text>
        </View>
        <View style={styles.loginForm}>
          <TextInput
            style={{height: 75}}
            placeholder="Email"
          />
      </View>
      <View style={styles.loginForm}>
        <TextInput
          style={{height: 75}}
          placeholder="Password"
        />
      </View>
      <View>
        <Button block style={styles.loginButton}>
          <Text style={styles.loginText}>Sign In</Text>
        </Button>
      </View>
      </View>
    </View>

上面的代码示例是我尝试使用 RN 的 TextInput 组件 + 纯 CSS。我也在看 NativeBase 和 RNElements（RNElements 表单 API：here，NativeBase 表单 API：here），但是 RN Elements 没有提到任何关于文本输入 + 边框的内容，虽然 Native Base 提到了它，但我尝试了，但没有成功：

<Form bordered>
    <Item>
      <Input placeholder="Username" />
    </Item>
</Form>

有什么方法可以像第一个屏幕截图一样创建带边框的输入？

【问题讨论】：

为您的 loginForm 样式提供文本输入 flex:1 和borderWidth 和颜色

标签： forms input react-native

【解决方案1】：

如果你想要一个边框输入，那么你需要将 borderWidth 和 borderColor 属性添加到你的 TextInput 样式属性中。用于创建这 2 个带边框的 TextInput 的代码如下：-

    <View style={{ 
      justifyContent: 'center',
      alignItems: "center"
    }}>
        <TextInput
          style={{
            borderWidth: 2,  // size/width of the border
            borderColor: 'lightgrey',  // color of the border
            paddingLeft: 10,
            height: 75
          }}
          placeholder="Email"
        />
        <TextInput
          style={{
            borderWidth: 2,
            borderColor: 'lightgrey',
            margin: 10,
            height: 75,
            paddingLeft: 10
          }}
          placeholder="Password"
        />
  </View>

这将创建带有所需边框的 TextInput :)

【讨论】：

【解决方案2】：

<View tyle={{flexDirectoin:'column',alignItems:'center'>
    <View 
    style{{flexdirection:'row',alignItems:'center',
    borderWidth:1,borderColor:'#000000'>
        <Image/> 
        <TextInput/>
    </View>
    <View 
    style{{flexdirection:'row',alignItems:'center',
    borderWidth:1,borderColor:'#000000'>
        <Image/> 
        <TextInput/>
    </View>
</View>

大概这样就可以了

【讨论】：