Добавление полей к правому краю Flex-Start React-Native

Question

import React, { Component } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import {
  CheckBox, Container, Content, Text, View, Button,
} from 'native-base';
import Fonts from '../common/Fonts';


const checkAllMargin = Dimensions.get('window').height / 3.14;

const styles = StyleSheet.create({
  wrapper: {
    justifyContent: 'flex-end',
    flexDirection: 'column',
    flex: 1,
  },
  moveButtonContainer: {
    flexDirection: 'row',
    alignSelf: 'flex-end',
    marginTop: checkAllMargin,
  },
  prevButton: {
    justifyContent: 'center',
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
    backgroundColor: '#333333',
    height: 55,
  },
  nextButton: {
    justifyContent: 'center',
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
    backgroundColor: '#4FCBFF',
    height: 55,
  },
  moveButtonText: {
    textAlign: 'center',
    fontFamily: Fonts.NANUMGOTHICBOLD,
    fontSize: 18,
  },
  termsView: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginTop: 21,
  },
  checkBox: {
    marginLeft: 10,
  },
  termsText: {
    alignSelf: 'center',
    marginLeft: 17,
    height: 16,
    fontFamily: Fonts.NANUMGOTHIC,
    fontSize: 11,
  },
  termsTextEnd: {
    fontFamily: Fonts.NANUMGOTHIC,
    fontSize: 11,
    alignSelf: 'center',
  },
  requiredText: {
    color: '#4FCBFF',
  },
  choiceText: {
    color: '#999999',
  },
  checkAllView: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    marginTop: 35,
  },
  checkAllText: {
    alignSelf: 'flex-end',
    marginRight: 42,
  },
  checkAllBox: {
    marginRight: 17,
  },
  openLinkButton: {
    borderColor: '#CCCCCC',
    borderRadius: 10,
    height: 18,
    width: 35,
    alignSelf: 'flex-end',
    borderWidth: 1,
  },
  openLinkText: {
    fontFamily: Fonts.NANUMGOTHIC,
    fontSize: 9,
    paddingTop: 3,
    paddingLeft: 5,
  },
});


class TermsAgreeContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      agreeTermsOfServices: false,
      agreeTermsOfPrivacy: false,
      agreeTermsOfCopyright: false,
      agreeAll: false,
    };
  }

  checkTermsOfServices = (isCheck) => {
    this.setState({
      agreeTermsOfServices: isCheck,
    });
  }

  checkTermsOfPrivacy = (isCheck) => {
    this.setState({
      agreeTermsOfPrivacy: isCheck,
    });
  }

  checkTermsOfCopyright = (isCheck) => {
    this.setState({
      agreeTermsOfCopyright: isCheck,
    });
  }

  checkAll = (isCheck) => {
    this.setState({
      agreeTermsOfServices: isCheck,
      agreeTermsOfPrivacy: isCheck,
      agreeTermsOfCopyright: isCheck,
      agreeAll: isCheck,
    });
  }

  render() {
    const {
      agreeTermsOfServices, agreeTermsOfPrivacy, agreeTermsOfCopyright, agreeAll,
    } = this.state;
    const {
      checkTermsOfServices, checkTermsOfPrivacy, checkTermsOfCopyright, checkAll,
    } = this;
    return (
      <Container>
        <Content scrollEnabled={false} contentContainerStyle={styles.wrapper}>
          <View style={styles.termsView}>
            <CheckBox
              checked={agreeTermsOfServices}
              onPress={() => checkTermsOfServices(!agreeTermsOfServices)}
              style={styles.checkBox}
            />
            <Text
              style={styles.termsText}
              onPress={() => checkTermsOfServices(!agreeTermsOfServices)}
              suppressHighlighting
            >
              TermsOfServices
            </Text>
            <Text style={[styles.termsTextEnd, styles.requiredText]}> (required)</Text>
            <Text style={[styles.openLinkButton, styles.openLinkText]}>Show</Text>
          </View>
          <View style={styles.termsView}>
            <CheckBox
              checked={agreeTermsOfPrivacy}
              onPress={() => checkTermsOfPrivacy(!agreeTermsOfPrivacy)}
              style={styles.checkBox}
            />
            <Text
              style={styles.termsText}
              onPress={() => checkTermsOfPrivacy(!agreeTermsOfPrivacy)}
              suppressHighlighting
            >
              TermsOfPrivacy
            </Text>
            <Text style={[styles.termsTextEnd, styles.requiredText]}> (required)</Text>
            <Text style={[styles.openLinkButton, styles.openLinkText]}>Show</Text>
          </View>
          <View style={styles.termsView}>
            <CheckBox
              checked={agreeTermsOfCopyright}
              onPress={() => checkTermsOfCopyright(!agreeTermsOfCopyright)}
              style={styles.checkBox}
            />
            <Text
              style={styles.termsText}
              onPress={() => checkTermsOfCopyright(!agreeTermsOfCopyright)}
              suppressHighlighting
            >
              TermsOfCopyright
            </Text>
            <Text style={[styles.termsTextEnd, styles.choiceText]}> (choice)</Text>
            <Text style={[styles.openLinkButton, styles.openLinkText]}>Show</Text>
          </View>
          <View style={styles.checkAllView}>
            <CheckBox
              checked={agreeAll}
              onPress={() => checkAll(!agreeAll)}
              style={styles.checkAllBox}
            />
            <Text
              style={styles.checkAllText}
              onPress={() => checkAll(!agreeAll)}
              suppressHighlighting
            >
              Check All
            </Text>
          </View>
          <View style={styles.moveButtonContainer}>
            <Button full style={styles.prevButton}>
              <Text style={styles.moveButtonText}>back</Text>
            </Button>
            <Button full style={styles.nextButton}>
              <Text style={styles.moveButtonText}>next</Text>
            </Button>
          </View>
        </Content>
      </Container>
    );
  }
}


export default TermsAgreeContainer;

В настоящее время положение кнопки «Показать» определяется длиной текста слева. Я хотел бы переместить его вправо, как на фотографии.

Я хочу, чтобы кнопка «Показать» была на полях 30 справа. Однако я не использую margin-right, если использую Flex-Start. Как я могу разместить кнопку показа на правой стороне?

Answer 1

Одним из способов может быть разделение текущей строки терминов на 2 представления, присвоение первому свойству flex-свойства и всего лишь отступу для второго.Просто оберните первые элементы в <View>, например:

      <View style={styles.termsView}>
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <CheckBox
            checked={agreeTermsOfServices}
            onPress={() => checkTermsOfServices(!agreeTermsOfServices)}
            style={styles.checkBox}
          />
          <Text
            style={styles.termsText}
            onPress={() => checkTermsOfServices(!agreeTermsOfServices)}
            suppressHighlighting>
            TermsOfServices
          </Text>
          <Text style={[styles.termsTextEnd, styles.requiredText]}>
            (required)
          </Text>
        </View>
        <Text
          style={[
            styles.openLinkButton,
            styles.openLinkText,
            { marginRight: 10 },
          ]}>
          Show
        </Text>
      </View>

И повторите эту структуру для каждой строки.