徽标未显示在 React Native Web 应用程序中答案

【问题标题】：Logo not displaying in React Native web app徽标未显示在 React Native Web 应用程序中
【发布时间】：2021-12-23 19:12:33
【问题描述】：

我的 react native 应用程序遇到了这个问题。这是下面的代码。我希望徽标显示在标题的左侧垂直中间。（我将它用于 Web 应用程序）现在使用此代码，甚至不显示徽标。

而且我不明白如何使用 flex 来放置徽标。谁能帮帮我？

var logo = require ('../img/logo-pb-alpha.png');
function Header() {

return (
    <View style={styles.header}>
        <Image source={logo} style={{ flex: 1, resizeMode: 'contain' }}/>
         <View style={styles.nav}>   
            <Pressable style={styles.button_primary} onPress={LogIn}><Text>Se connecter</Text></Pressable>
            <Pressable style={styles.button_secondary} onPress={SignUp}><Text>S'inscrire</Text></Pressable>
        </View>
    </View>
)
}

const screen = Dimensions.get("screen");
const styles = StyleSheet.create({
header: {
    height: screen.height * 0.1,
    width: screen.width,
    backgroundColor: "#fff",
    opacity: 0.7,
    alignItems: "flex-start",
    flexWrap: "nowrap",
},

button_primary: {
    backgroundColor: "#ec5e61",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 12,
    elevation: 3,
    paddingVertical: 8,
    paddingHorizontal: 8,
    fontSize: 16,
    lineHeight: 21,
    fontWeight: "bold",
    letterSpacing: 0.25,
    borderWidth: 1,
    marginRight: 30,
},

button_secondary: {
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 12,
    elevation: 3,
    paddingVertical: 8,
    paddingHorizontal: 8,
    borderWidth: 2,
    borderColor: "#ec5e61",
    marginRight: 10,
},

nav: {
    width: screen.width * 0.93,
    flexDirection: "row",
    justifyContent: "flex-end",
    marginBottom: 17,
},
});

export default Header

【问题讨论】：

嗨:) 您需要将display: flex 应用于父容器，在您的情况下是由View 组件生成的容器。
我在 openclassroom tuto 上看到显示：flex 在 react native 中自动完成？
我不知道，我只写 React。您能否在开发工具中查看应用了哪些样式？
我想我可能已经解决了，我删除了 Image 样式中的 flex: 1 和 resizeMode: contains 并且我定义了与屏幕大小成比例的图像的宽度和高度
我设法正确显示徽标，但它已将按钮移到另一行

标签： javascript css reactjs react-native jsx

【解决方案1】：

用下面的代码解决了问题：

<View style={styles.header}>
        <Image source={logo} style={{
            width: '14%',
            height: '100%',      
        }}/>


//CSS
header: {
    height: screen.height * 0.1,
    width: screen.width,
    backgroundColor: "#fff",
    alignItems: "flex-start",
    flexWrap: "wrap",

},

【讨论】：