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

React Native

Object Storage Arubacloud
0 głosów
239 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 669 wizyt
0 głosów
0 odpowiedzi 120 wizyt
pytanie zadane 1 kwietnia 2023 w JavaScript przez DzikieHarce Użytkownik (690 p.)
0 głosów
1 odpowiedź 123 wizyt
pytanie zadane 20 marca 2023 w JavaScript przez MacieKap Bywalec (2,400 p.)

92,759 zapytań

141,682 odpowiedzi

320,469 komentarzy

62,104 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

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!

...