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

Posted 2023-02-16

【中文标题】徽标未显示在 React Native Web 应用程序中

【英文标题】：Logo not displaying in React Native web app

【发布时间】：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 组件生成的容器。

我在 openclas-s-room tuto 上看到显示：flex 在 react native 中自动完成？

我不知道，我只写 React。您能否在开发工具中查看应用了哪些样式？

我想我可能已经解决了，我删除了 Image 样式中的 flex: 1 和 resizeMode: contains 并且我定义了与屏幕大小成比例的图像的宽度和高度

我设法正确显示徽标，但它已将按钮移到另一行

【参考方案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",

,