Как правильно настроить несколько флажков в реагировать родной?

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

Проверьте это-

   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>
    );
  }
}

Answer 2

Я полагаю, что вы можете использовать flexWrap для вашего макета, как описано здесь . Чтобы заставить его работать на видах разных размеров, важно указать фиксированную ширину компонента Checkbox и фиксированную высоту компонента View.