使用styled components的React Native中如何对齐View组件内的文本？

问题原因 #

该对齐问题来自两个布局逻辑错误：

1. StyledItem 组件设置了justifyContent: center，当商品名称长度不同、折行行数不一致时，整个卡片内容会垂直居中，导致短文本卡片的图片位置比长文本卡片低，文本自然无法对齐
2. 商品名称的Text组件未做行数限制和对齐配置，长文本会无限撑开容器高度，进一步拉大卡片之间的布局差异

修复方案 #

• 第一步：调整StyledItem布局逻辑
  将原样式替换为如下代码，把内容对齐改为顶部对齐，不再全局垂直居中：

const StyledItem = styled.View`
  margin: 8px;
  width: 100px;
  height: 118px;
  justifyContent: flex-start;
  alignItems: center;
  position: relative;
`

• 第二步：封装卡片内可点击区域样式
  新增样式组件统一可点击区域的布局：

const StyledItemTouchable = styled.TouchableOpacity`
  width: 100%;
  flexDirection: column;
  alignItems: center;
`

• 第三步：新增商品文本的样式组件，限制行数和对齐
  新增如下样式，统一文本展示规则，超出长度自动添加省略号：

const StyledItemText = styled.Text`
  width: 100%;
  marginTop: 4px;
  fontSize: 12px;
  color: ${colours.inputboxtext};
  textAlign: center;
  numberOfLines: 2;
  ellipsizeMode: tail;
`

• 第四步：替换原有渲染逻辑
  把商品卡片的渲染部分替换为如下代码：

<StyledItem key={index}>
  <StyledItemTouchable
    onPress={() =>
      navigation.push("Item", {
        name: element.name,
        email: user.email,
      })
    }
  >
    <StyledImage
      source={{
        uri: element.image,
      }}
    />
    <StyledItemText>{element.name}</StyledItemText>
  </StyledItemTouchable>
</StyledItem>

• 可选优化：调整StyledViewItems的多行对齐
  如果调整后卡片行间距过大，可以修改StyledViewItems样式，新增alignContent: flex-start消除多余空白：

const StyledViewItems = styled.View`
  flex: 4;
  background-color: ${colours.primary};
  width: 100%;
  flexDirection: row;
  flexWrap: wrap;
  alignContent: flex-start;
  justifyContent: center;
  alignSelf: center;
`

内容的提问来源于stack exchange，提问作者MatCode