Javascript 将文本放在缩略图旁边而不是中间

当前，我的用户名文本显示在视图的中心。我想更改它，使其显示在缩略图的正右侧。如果我从项目中删除

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',
  },
});

从'react native'导入{StyleSheet，Alert}；
从“本机基础”导入{视图、文本、按钮、缩略图}；
从“反应本机矢量图标/FontAwesome”导入图标；
从“react native size matters”导入{mediatescale}；
从“反应本机手势处理程序”导入{TouchableOpacity}；
返回(
用户名
);
};
const styles=StyleSheet.create({
项目：{
背景颜色：“粉色”，
边界半径：中等比例（20），
填充：中等比例（20），
边缘：中等比例（8），
marginHorizontal:16，
高度：中等刻度（70），
justifyContent:'之间的空间'，
flexDirection:'行'，
对齐项目：“居中”，
},
缩略图：{
身高：70，
宽度：70，
位置：'相对'，
},
名称容器：{
//弹性：1，
//对齐项目：“居中”，
//textAlign:'中心'，
},
用户名：{
填充右侧：中等比例（55），
填充左侧：中等比例（20），
//textAlign:'中心'，
颜色：'白色'，
重量：'900'
},
删除按钮：{
背景颜色：“#31C283”，
宽度：中等比例（45），
为内容辩护：“中心”，
},
水平线：{
marginTop：中等规模（30），
宽度：“87%”，
高度：中等比例（1），
背景颜色：“灰色”，
对齐自我：“中心”，
},
});

我尝试创建一个快餐博览会，但我无法在其中使用native base

---

如果添加了不需要的填充，请更改下面的样式，它会将文本放置在缩略图旁边

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

---

如果您可以在例如CodeSandbox中创建一个可复制的示例。人们帮助你会更方便。你需要在一个视图中包装缩略图和文本，在另一个视图中包装右按钮。这可以通过使用

flex

@DanielCheung来实现。无法在中安装native base。我应该在哪里使用flex@阿瓦伊斯