Question

我是React Native的新手，我正在设计一种表格来注册动物以供收养。通过选择单选按钮和复选框可以填充一些字段，但是为了组织表单的布局，我需要拉远显示在行中的那些表单元素。

我尝试使用：

justify-content: 'space around'-无效，因为标签与按钮/框之间的距离太远了；
paddingLeft，paddingRight-可行，但是由于按钮和框上的标签带有不同数量的字符，因此我不能像在波纹管中那样使它们垂直对齐，而不会浪费很多时间来尝试设置正确的填充。

有更简单的方法吗？

这是我的代码：

<Text>SEXO</Text>
<View style = {{flexDirection: 'row', alignSelf: "auto"}}>
    <RadioButton checked={machoCheck} onPress={radioSexoHandlerMacho} />
    <Text style={{marginRight: 20}}>Macho</Text>
    <RadioButton checked={femeaCheck} onPress={radioSexoHandlerFemea}/>
    <Text>Femea</Text>
</View>

<Text>PORTE</Text>
<View style = {{flexDirection: 'row'}}>
    <RadioButton checked={pequenoCheck} onPress={radioPorteHandlerPequeno}/>
    <Text style={{paddingRight: 20}}>Pequeno</Text>
    <RadioButton checked={medioCheck} onPress={radioPorteHandlerMedio}/>
    <Text style={{paddingRight: 20}}>Medio</Text>
    <RadioButton checked={grandeCheck} onPress={radioPorteHandlerGrande}/>
    <Text>Grande</Text>
</View>

<Text>IDADE</Text>
<View style = {{flexDirection: 'row'}}>
    <RadioButton checked={filhoteCheck} onPress={radioIdadeHandlerFilhote}/>
    <Text style={{paddingRight: 20}}>Filhote</Text>
    <RadioButton checked={adultoCheck} onPress={radioIdadeHandlerAdulto}/>
    <Text style={{paddingRight: 20}}>Adulto</Text>
    <RadioButton checked={idosoCheck} onPress={radioIdadeHandlerIdoso}/>
    <Text>Idoso</Text>
</View>

<Text>TEMPERAMENTO</Text>
<View style={{flexDirection: "row"}}>
    <CheckBox style = {{height: 25}}
        disabled={false}
        value={brincalhao}
        onValueChange={(newValue) => setBrincalhao(newValue)}
        tintColors={{true: '#000000', false: '#2f3130'}}
        />
    <Text>Brincalhão</Text>

    <CheckBox style = {{height: 25}}
        disabled={false}
        value={timido}
        onValueChange={(newValue) => setTimido(newValue)}
        tintColors={{true: '#000000', false: '#2f3130'}}
        />
    <Text>Tímido</Text>

    <CheckBox style = {{height: 25}}
        disabled={false}
        value={calmo}
        onValueChange={(newValue) => setCalmo(newValue)}
        tintColors={{true: '#000000', false: '#2f3130'}}
        />
    <Text>Calmo</Text>
</View>

Answer 1

您可以做这样的事情，

就像每个项目都包裹在fragment标记中一样。

<View style = {{flexDirection: 'row', padding:5, justifyContent:"space-between"}}>
    <>
     <RadioButton checked={machoCheck} onPress={radioSexoHandlerMacho} />
     <Text style={{marginRight: 20}}>Macho</Text>
   </>
   <>
    <RadioButton checked={femeaCheck} onPress={radioSexoHandlerFemea}/
    <Text>Femea</Text>
   </>
</View>

如何正确隔开同一行中的两个单选按钮或复选框？

1 个答案: