2

在此设置中无法让文本和图像并排排列： 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,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：为图像添加了宽度和高度。

4

1 回答 1

1

你应该给风格和width风格- 。也不需要给风格。heightImagearrowIconwidthtopHomeImage

// topHomeImage: {
//     width: 32 
// },
arrowIcon: {
    width: 32,
    height: 32
},

更新

stye另外，我在您的代码上发现了一个错字。

改变

<View stye={styles.topHomeContainer}>

至

<View style={styles.topHomeContainer}>
于 2020-12-28T02:26:06.620 回答