Tengo este problema en mi aplicación nativa de reacción. Aquí está el código a continuación. Quiero que el logotipo se muestre en el lado izquierdo de mi encabezado en el medio verticalmente. (Lo uso para una aplicación web) En este momento, con este código, ni siquiera se muestra el logotipo.

Y no puedo entender cómo usar flex para colocar el logotipo. Alguien puede ayudarme ?

 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