React-Native带边框的文本输入？

我想创建一个登录表单像下面上反应母语：React-Native带边框的文本输入？

我无法创建一个表单/的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' 
    } 
}

和代码：

使用RN的 TextInput分量+纯CSS我尝试上面的代码示例

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>

。我还期待着在NativeBase和RNElements（RNElements形式的API：here，NativeBase形成API：here），但RN元素没有提及文本输入+边境什么，而天然碱基提到这个问题，我试过了，没有成功：

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

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

来源

2017-09-02 Iggy

给你的文本输入柔性：1和边框宽度和颜色，以你的登录表单样式 – eden

如果你想有一个边界输入，那么你需要的边框宽度和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您需要的边框:)

来源

2017-09-02 18:23:23

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

事情大致是这样的会做

来源

2017-09-02 16:24:23 Vicky

React-Native带边框的文本输入？

回答

相关问题