在 Flex-Start React-Native 的右边缘添加边距答案

【问题标题】：Adding margins to the right edge of Flex-Start React-Native在 Flex-Start React-Native 的右边缘添加边距
【发布时间】：2019-05-21 06:21:28
【问题描述】：

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。但是，如果我使用 Flex-Start，我不会使用 margin-right。如何将显示按钮放在右侧？

【问题讨论】：

在术语中使用justifyContent: 'space-between'查看样式并留出右边距。
@SanyamJain 使用 LeftMargin，显示按钮除外。如果使用space-between，LeftMargin 不适用于TermsText。我该怎么做？
你能发到snack.expo.io吗？
@SanyamJain snack.expo.io/B1l0yQ-aN

标签： css react-native flexbox

【解决方案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>

并为每一行重复此结构。

【讨论】：