将文本放在缩略图旁边而不是中心答案

【问题标题】：place text next to thumbnail instead of center将文本放在缩略图旁边而不是中心
【发布时间】：2021-01-22 09:41:06
【问题描述】：

目前，我的用户名文本显示在视图的中心。我想更改它，使其显示在缩略图的右侧。如果我从项目中删除alignItems: 'center',，它会扰乱整个风格。我还能如何解决这个问题？

import { StyleSheet, Alert } from 'react-native';
import { View, Text, Button, Thumbnail } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import { moderateScale } from 'react-native-size-matters';
import { TouchableOpacity } from 'react-native-gesture-handler';

 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}>USER NAME</Text>
      </View>
      <Button
        rounded
        style={styles.deleteButton}>
        <Icon name="trash-o" size={moderateScale(20)} color="black" />
      </Button>
    </View>
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: 'pink',
    borderRadius: moderateScale(20),
    padding: moderateScale(20),
    marginVertical: moderateScale(8),
    marginHorizontal: 16,
    height: moderateScale(70),
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
  },
  thumbnail: {
    height: 70,
    width: 70,
    position: 'relative',
  },
  nameContainer: {
    //flex: 1,
    // alignItems: 'center',
    // textAlign: 'center',
  },
  userName: {
    paddingRight: moderateScale(55),
    paddingLeft: moderateScale(20),
    //textAlign: 'center',
    color: 'white',
    fontWeight: '900'
  },
  deleteButton: {
    backgroundColor: '#31C283',
    width: moderateScale(45),
    justifyContent: 'center',
  },
  horizontalLine: {
    marginTop: moderateScale(30),
    width: '87%',
    height: moderateScale(1),
    backgroundColor: 'grey',
    alignSelf: 'center',
  },
});

我尝试创建一个小吃博览会，但我无法在其中使用原生基地。

【问题讨论】：

如果您可以创建一个可重现的示例，例如代码沙盒。人们帮助你会更方便。
您需要在一个视图中包装缩略图和文本，在另一个视图中包装右键。
这可以使用flex实现
@DanielCheung 无法在零食展中安装原生基地
我应该在哪里使用 flex？ @Awais

标签： javascript css reactjs typescript react-native

【解决方案1】：

您添加了不需要的填充，更改如下样式，它将把文本放在缩略图旁边。

  nameContainer: {
    flex: 1,
  },
  userName: {
    color: 'white',
    fontWeight: '900'
  },

【讨论】：