我是反应原生的新手,我正在尝试使用来自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算法)
答案 0 :(得分:2)
您可以使用flex属性,例如 justifyContent 和 alginItem ,也可以使用文本属性,例如 alignText ,和 alignSelf 。
df = pd.DataFrame({'Time': ['00:06:44', '00:00:34', '00:02:32' ,'00:00:18',
'00:03:42', '23:59:58']})
res = pd.to_timedelta(df['Time']).dt.seconds.sum() # 87228