在所有行的中心移动文本[重复]答案

【问题标题】：move text in center for all lines [duplicate]在所有行的中心移动文本[重复]
【发布时间】：2020-08-25 10:35:24
【问题描述】：

我在 FlatList 中呈现这样的项目。当名称太长时，它会延伸到下一行，这没关系，但我希望它仍应位于中心。第二行也应位于中心。例如，Ross 也应该大致属于 Vom。这可能吗？

export const FriendEntry: React.FunctionComponent<FriendEntryProps> = ({
  friend,
  currentUserId,
}) => {

  return (
    <View style={styles.item}>
      <TouchableOpacity>
        <Thumbnail
          style={styles.thumbnail}
          source={{
            uri:
              'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
          }} />
      </TouchableOpacity>
      <View style={styles.nameContainer}>
        <Text style={styles.userName}>{userName}</Text>
      </View>
      <View style={styles.deleteButtonContainer}>
        <Button
          rounded
          style={styles.deleteButton}
          <Icon name="trash-o" size={moderateScale(20)} color="black" />
        </Button>
      </View>
    </View>
  );
};

export const styles = StyleSheet.create({
  item: {
    backgroundColor: 'white',
    borderRadius: moderateScale(20),
    padding: moderateScale(20),
    marginVertical: moderateScale(8),
    marginHorizontal: 16,
    height: moderateScale(110),
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  userName: {
    paddingRight: 55,
    paddingLeft: 10,
    paddingTop: 20,
  },
  deleteButton: {
    backgroundColor: '#31C283',
    width: moderateScale(45),
    justifyContent: 'center',
  },
  deleteButtonContainer: {
    paddingTop: 12,
    marginRight: 2,
  },
  thumbnail: {
    height: 85,
    width: 85,
    marginLeft: 2,
    paddingRight: 0,
    position: 'relative',
  },
  nameContainer: {
    flex: 1,
    alignItems: 'center',
    textAlign: 'center'
  },
});

【问题讨论】：

将alignItems: 'center' 添加到styles.item。
尝试 justifyContent: "center" on name container

标签： javascript css reactjs typescript react-native

【解决方案1】：

将 textAlign: 'center' 添加到您的用户名对象。

userName: {
    paddingRight: 55,
    paddingLeft: 10,
    paddingTop: 20,
    textAlign: 'center'
}

【讨论】：

【解决方案2】：

要将它们垂直对齐，请使用alignItems: 'center' in

items: {
  alignItems: 'center'
}

这样TouchableOpacity 和Views 将在中心垂直对齐。

【讨论】：

【解决方案3】：

使用 textAlign 作为文本样式

userName: {
    //other styles
    textAlign: 'center'
}

【讨论】：