Question

我正在尝试在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没有提到任何关于Text Input + Border的内容，而Native Base提到它，我试过了，但没有成功：

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

我可以通过第一个截图创建边界输入的一种方法是什么？

Answer 1

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

大致相似的事情

Answer 2

如果您想要边框输入，则需要将 borderWidth 和 borderColor 道具添加到TextInput样式道具中。使用边框创建这两个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：）

React-Native边界文本输入？

2 个答案: