javascript - React Native 如何
在 flex 方向行内使用
问题描述
我是新来的本地人,我在定位我的文本时遇到了问题。我想要这样的东西:
Hi, Daffa
XII RPL
但这是我的结果:
Hi, Daffa XII RPL
这是我的代码:
import React from 'react';
import {View, StyleSheet, Text, Image} from 'react-native';
export default function Header() {
return (
<View style={styles.header}>
<Image style={styles.img} source={require('../assets/me.png')} />
<Text style={styles.text}>Hi, Daffa Quraisy</Text>
<Text style={styles.kelas}>XII RPL</Text>
</View>
);
}
const styles = StyleSheet.create({
header: {
height: 200,
backgroundColor: '#327fe3',
flexDirection: 'row',
alignItems: 'center',
},
img: {
height: 50,
width: 50,
marginLeft: 20,
padding: 0,
},
text: {
color: 'white',
marginLeft: 18,
fontWeight: 'bold',
},
kelas: {
color: 'white',
fontSize: 12,
marginLeft: 18,
flexWrap: 'nowrap',
},
});
感谢您阅读本文,如果我的问题有点愚蠢,我很抱歉,也很抱歉我的英语不好。
解决方案
工作应用:世博小吃
Text
在组件中包装View
组件:
import React from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
export default function Header() {
return (
<View style={styles.header}>
<Image style={styles.img} source={require('./assets/snack-icon.png')} />
<View>
<Text style={styles.text}>Hi, Daffa Quraisy</Text>
<Text style={styles.kelas}>XII RPL</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
header: {
height: 200,
backgroundColor: '#327fe3',
flexDirection: 'row',
alignItems: 'center',
},
img: {
height: 50,
width: 50,
marginLeft: 20,
padding: 0,
},
text: {
color: 'white',
marginLeft: 18,
fontWeight: 'bold',
},
kelas: {
color: 'white',
fontSize: 12,
marginLeft: 18,
flexWrap: 'nowrap',
},
});
推荐阅读
- html - html表单提交到带有参数的快递路线
- swift - Swift:如何取消延迟的 pushViewController?
- ios - NSURL URLByAppendingPathExtension 崩溃
- react-native - GitHub User Repositories - GraphQL API 使用 typePolicy 进行无限滚动和分页
- html - HTML:IT 将我重定向到同一个文件而不是 Inscription.html
- python - Pygame:我不能用箭头键移动一个用“pygame.draw.circle”函数绘制的圆圈
- javascript - 如何检测来自 javascript 中 html 的变量中的禁用字母?
- reactjs - 即使使用默认值,useContext 也会返回 undefined
- python - 运行 Prophet CV 超参数调整的 Dask 使我的 PC 崩溃
- c++ - 如果 glPerspective 未定义,则将矩阵直接传递给 OpenGL