未能对齐反应原生元素中的复选框答案

【问题标题】：failed to align checkbox in react-native elements未能对齐反应原生元素中的复选框
【发布时间】：2018-04-15 11:50:05
【问题描述】：

我是 react-native 的新手，我正在尝试使用 react-native 元素 1.00 beta4 中的所有输入组件创建一个简单的页面。我的问题是我未能对齐文本组件附近的复选框，即使父视图 flexdirection 是在“行”中。

register.js

import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { View,Button } from 'react-native';
import {Icon,CheckBox,Text,Input} from 'react-native-elements';
 const renderField=({label,keyboardType,name,icon,iconType}) => {
    return(
            <View style={{flexDirection:'row'}}>
                <Input placeholder={label} inputContainerStyle={{borderWidth:2,borderColor:'lightgrey',borderRadius:20}} inputStyle={{color:'grey'}} leftIcon={<Icon size={25} type={iconType} name={icon} color="grey" />} errorStyle={{fontSize:15}} errorMessage="error" />
            </View>
    )
}
 const checkBoxField=({label,keyboardType,name}) => {
    return(
            <View style={{flexDirection:'row'}}>
                <Text>{label}</Text>
                <CheckBox  title='Male' checkedIcon='dot-circle-o' uncheckedIcon='circle-o' checked={true} containerStyle={{backgroundColor:'transparent'}} />      
            </View>
    )
}

const RegisterForm=props => {
    const {handleSubmit}=props;
    return(
            <View style={{flex:1,flexDirection:'column',margin:20,justifyContent:'flex-start',alignItems:'center'}}>

                <Field label="Username" component={renderField} name="username" icon="user" iconType="font-awesome" />
                <Field label="Email" component={renderField} name="username" icon="email" iconType="zocial" />
                <Field label="Gender" component={checkBoxField} name="gender"  />
                <Button title='SUBMIT' onPress={handleSubmit} />

            </View>
    )
}
const Register=reduxForm({
    form:'register',
})(RegisterForm);
export default Register;

输出

这里有什么问题？如何对齐我的复选框（使用 flexbox 算法）

【问题讨论】：

标签： react-native

【解决方案1】：

您可以使用 justifyContent 和 alginItem 等 flex 属性，也可以使用 alignText 等 Text 属性，和 alignSelf。

 const checkBoxField=({label,keyboardType,name}) => {
    return(
            <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                <Text style={{alignSelf:'center',textAlign:'center'}}>{label}</Text>
                <CheckBox  title='Male' checkedIcon='dot-circle-o' uncheckedIcon='circle-o' checked={true} containerStyle={{backgroundColor:'transparent'}} />      
            </View>
    )
}

【讨论】：