React Native：flex - 将内容移动到最右边答案

【问题标题】：React Native: flex - move content to far rightReact Native：flex - 将内容移动到最右边
【发布时间】：2018-01-16 16:12:50
【问题描述】：

我正在尝试将selection 文本移动到此详细信息组件的最右侧。我已经在 View 上使用 sideBySide 样式尝试了justifyContent，在 selectionStyle 上尝试了alignSelf。我尝试了各种组合，但无法将 selection 文本移动到最右边，直到箭头所在的位置。我觉得我缺少一些简单的东西。

这是它的样子（选择不在最右边）：

感谢您的帮助！

const Detail = ({ onPress, selection, text, info }) => {
  const wrapper = {
    flex: 1,
    paddingTop: 20,
    paddingLeft: 16,
  };
  const sideBySide = {
    flexDirection: 'row',
  };
  const textStyle = {
    flex: 1.3,
    fontWeight: '500',
    fontSize: 12,
    paddingRight: 5,
  };
  const selectionStyle = {
    flex: 1,
    color: 'blue',
    fontWeight: '500',
    fontSize: 12,
  };
  const infoWrapper = {
    paddingTop: 8,
    paddingBottom: 20,
  };

  return (
    <ViewWrapper onPress={onPress} noArrow={true}>
      <View style={wrapper}>
        <View style={sideBySide}>
          <Text style={textStyle}>
            {text}
          </Text>
          <Text style={selectionStyle}>
            {selection}
          </Text>
        </View>
        <View style={infoWrapper}>
          <Text style={subHeader}>
            {info}
          </Text>
        </View>
      </View>
    </ViewWrapper>
  );
};

const iconView = { position: 'absolute', right: 16 };
const icon = { color: 'gray', fontSize: 14 };

const ViewWrapper = ({ onPress, children, noArrow, style }) => {
  const view = {
    flexDirection: 'row',
    alignItems: 'center',
    paddingRight: Platform.OS === 'ios' && !noArrow ? 35 : 16,
    backgroundColor: 'white',
  };

  return (
    <TouchableHighlight underlayColor="#eee" onPress={onPress}>
      <View style={[view, style]}>
        {children}
        {Platform.OS === 'ios' &&
          !noArrow && (
            <View style={iconView}>
              <Icon name="arrow" style={icon} />
            </View>
          )}
      </View>
    </TouchableHighlight>
  );
};

【问题讨论】：

我想你必须告诉主容器来占据整个宽度，可能像Dimensions.get('window').width

标签： reactjs react-native flexbox

【解决方案1】：

从selectionStyle 中删除flex: 1

【讨论】：