• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React Native

VPS Starter Arubacloud
0 głosów
208 wizyt
pytanie zadane 19 marca 2023 w JavaScript przez MacieKap Bywalec (2,400 p.)

Witam,

zacząłem naukę Reacta Native i napotkałem taki błąd:  "ERROR  ReferenceError: Property 'flex' doesn't exist, js engine: hermes".

Jest w stanie ktoś pomóc?

import React from 'react';
import {ScrollView, Text, StyleSheet, Button, SafeAreaView, View} from 'react-native';

const App = () => (
    <View style={styles.container}>
    <Button onPress={() => {console.log('Button is touched')}}
            style={styles.button}
    title='Press me'
    />
    </View>
);
 const styles =StyleSheet.create({
        container: {
          alignItems: 'center',
          justifyContent: 'center',
            display: 'flex',
        },
        button: {
            backgroundColor: '#10c6cb',
            color: '#fff',
            height: 30,
            width: 50,
        },
     });
export default App;

Z góry dziękuję za wszystkie odpowiedzi

komentarz 19 marca 2023 przez ScriptyChris Mędrzec (190,190 p.)

Z tego co widzę w docsach, React Native wspiera Flexbox-a, a nawet 'flex' jest domyślną wartością dla property display.

https://reactnative.dev/docs/layout-props#display

Może masz zbyt starą wersję React Native?

1 odpowiedź

0 głosów
odpowiedź 20 marca 2023 przez kozacko Obywatel (1,580 p.)

Ten błąd pojawia się, ponieważ właściwość 'flex' nie jest obsługiwana przez silnik Hermes.Możesz zamiast tego użyć właściwości 'display: flex', aby osiągnąć ten sam efekt. W twoim przypadku, właściwość 'display: flex' jest już dodana do stylów kontenera, więc możesz po prostu usunąć właściwość 'display' z deklaracji stylów przycisku.

Tutaj masz poprawkę:

 

import React from 'react';
import {ScrollView, Text, StyleSheet, Button, SafeAreaView, View} from 'react-native';
 
const App = () => (
    <View style={styles.container}>
        <Button onPress={() => {console.log('Button is touched')}}
                style={styles.button}
        title='Press me'
        />
    </View>
);

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
    },
    button: {
        backgroundColor: '#10c6cb',
        color: '#fff',
        height: 30,
        width: 50,
    },
});

export default App;

 

W tym poprawionym kodzie usunąłem właściwość 'display' z deklaracji stylów przycisku, a dodatkowo dodałem właściwość 'flex: 1' do deklaracji stylów kontenera, aby zapewnić, że cała przestrzeń jest wypełniona.

Podobne pytania

0 głosów
0 odpowiedzi 606 wizyt
0 głosów
0 odpowiedzi 113 wizyt
pytanie zadane 1 kwietnia 2023 w JavaScript przez DzikieHarce Użytkownik (690 p.)
0 głosów
1 odpowiedź 108 wizyt
pytanie zadane 20 marca 2023 w JavaScript przez MacieKap Bywalec (2,400 p.)

92,453 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...