如何在本机反应中正确调整多个复选框？

Question

我正在使用react-native-check-box 在我的应用中实现复选框。

假设我必须创建 4 个复选框并且它应该正确呈现。但是现在渲染了 4 个框，但它们的文本是上下移动的，而如果存在间距问题，剩余的框应该下降到下一行。或者它应该调整，但它的文本没有起伏。

请提出建议。

    []Facebook []Twitter []Whatsapp []Instagram

    []Facebook []Twitter 
    []Whatsapp []Instagram

    []Fac []Twi []Wha []Ins
      ebo   tte   tsa   tag
      ok    r     app   ram

       <View style={{
          flexDirection:'row', backgroundColor:'#fff', marginBottom:8
       }}>
       <CheckBox
         style={{flex: 1, padding: 1}}
         onClick={()=>{
           this.setState({
             isChecked:!this.state.isChecked
           })
         }}
         isChecked={true}
         rightText={"Facebook"}
       />

       <CheckBox
         style={{flex: 1, padding: 1}}
         onClick={()=>{
           this.setState({
             isChecked:!this.state.isChecked
           })
         }}
         isChecked={false}
         rightText={"Whatsapp"}
       />

       <CheckBox
         style={{flex: 1, padding: 1}}
         onClick={()=>{
           this.setState({
             isChecked:!this.state.isChecked
           })
         }}
         isChecked={this.state.isChecked}
         rightText={"Instagram"}
       />  
     </View>

谢谢。

Answer 1

我相信您可以使用flexWrap 进行布局，如here 所述。要使其适用于不同大小的视图，重要的是指定Checkbox 组件的固定宽度和View 组件的固定高度。

Answer 2

检查这个-

   import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import CheckBox from 'react-native-check-box';

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isChecked: false,
    };
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center' }}>
        <View
          style={{
            width: '100%',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <View
            style={{
              width: '100%',
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
            <CheckBox
              style={{ width: '50%', padding: 1 }}
              rightTextStyle={{ marginLeft: 0, paddingLeft: 0 }}
              onClick={() => {
                this.setState({
                  isChecked: !this.state.isChecked,
                });
              }}
              isChecked={true}
              rightText={'Facebook'}
            />

            <CheckBox
              style={{ width: '50%', padding: 1 }}
              rightTextStyle={{ marginLeft: 0, paddingLeft: 0 }}
              onClick={() => {
                this.setState({
                  isChecked: !this.state.isChecked,
                });
              }}
              isChecked={false}
              rightText={'Whatsapp'}
            />
          </View>
          <View
            style={{
              width: '100%',
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
            <CheckBox
              style={{ width: '50%', padding: 1 }}
              rightTextStyle={{ marginLeft: 0, paddingLeft: 0 }}
              onClick={() => {
                this.setState({
                  isChecked: !this.state.isChecked,
                });
              }}
              isChecked={this.state.isChecked}
              rightText={'Instagram'}
            />

            <CheckBox
              style={{
                width: '50%',
                padding: 1,
              }}
              rightTextStyle={{ marginLeft: 0, paddingLeft: 0 }}
              onClick={() => {
                this.setState({
                  isChecked: !this.state.isChecked,
                });
              }}
              isChecked={this.state.isChecked}
              rightText={'Twitter'}
            />
          </View>
        </View>
      </View>
    );
  }
}