React Native Flex 样式问题

如何解决React Native Flex 样式问题

在此设置中无法将文本和图像并排排列： 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}>