问题描述
在此设置中无法将文本和图像并排排列: https://snack.expo.io/XZef1XEje
将 width
添加到 topHomeTextContainer
是否真的有助于排列元素?我尝试添加一个额外的 <View />
,但没有任何作用。
如果链接失效:
import React,{ useState } from "react"
import { StyleSheet,Image,Text,TouchableOpacity,View } from "react-native"
const App = () => {
return (
<View stye={styles.topHomeContainer}>
<View style={styles.topHomeTextContainer}>
<Text style={styles.topHomeText}>Find Things</Text>
</View>
{/* <View style={styles.topHomeImageContainer}> */}
<TouchableOpacity
style={styles.topHomeImage}
>
<Image
style={styles.arrowIcon}
source={{uri:"https://i.pinimg.com/originals/4d/4d/b9/4d4db9216358ec06d74d20507ed75c49.png"}}
/>
</TouchableOpacity>
{/* </View> */}
</View>
)
}
const styles = StyleSheet.create({
topHomeContainer: {
flex: 1,flexDirection: `row`,alignItems: `stretch`,justifyContent: `center`,height: 100,marginBottom: 15,},topHomeTextContainer: {
//width: `65%`,topHomeText: {
color: `rgb(0,0)`,fontFamily: "GothamMedium",fontSize: 20,fontWeight: `500`,letterSpacing: 0,// topHomeImageContainer: {
// width: scaleHelper.w(32),// },//topHomeImage: { width: 32 },arrowIcon: {
width: 32,height: 32
},})
export default App
更新 1:为图像添加宽度和高度。
解决方法
您应该将 width
和 height
样式赋予 Image
样式 - arrowIcon
。也无需将 width
赋予 topHomeImage
样式。
// topHomeImage: {
// width: 32
// },arrowIcon: {
width: 32,height: 32
},
更新
另外,我在您的代码中发现了一个错字 stye
。
改变
<View stye={styles.topHomeContainer}>
到
<View style={styles.topHomeContainer}>