Question

我正在尝试将selection文本移到此详细信息组件的最右侧。我已经使用sideBySide样式在View上尝试了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>
  );
};

Answer 1

从flex: 1

中删除selectionStyle

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

1 个答案: