React Native Flex 样式问题

Question

在此设置中无法让文本和图像并排排列： https://snack.expo.io/XZef1XEje

将width添加到topHomeTextContainer真的有助于排列元素吗？我尝试添加一个额外的 <View />，但没有任何效果。

如果 link 不起作用：

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：为图像添加了宽度和高度。

Answer 1

您应该将 width 和 height 风格赋予 Image 风格 - arrowIcon。也不需要给 width 到 topHomeImage 样式。

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

更新

此外，我在您的代码中发现了一个拼写错误 stye。

改变

<View stye={styles.topHomeContainer}>

至

<View style={styles.topHomeContainer}>

React Native Flex 样式问题

React Native Flex Styling Issue

css

flexbox

reactjs

react-native

react-styleguidist