Les feuilles de style importées ne fonctionnent pas après l'ajout de react-native-navigation

Question

J'ai récemment ajouté reaction-native-navigation à mon projet, et maintenant je ne peux plus utiliser la feuille de style importée. Ce que je suis en train de faire est la suivante:

import screenstyles from './screenstyles'; 

class Screen extends Component { 

render() { 
    return (
    <View style={screenstyles.container}> 
     <Text style={screenstyles.basictext}>Text I want to display</Text> 
    </View> 
); 
} 

screenstyles.js:

import EStyleSheet from 'react-native-extended-stylesheet'; 

export default EStyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    backgroundColor: '$primaryBlue' 
    }, 
    basictext: { 
    color: "#fff", 
    fontSize: 34 
    } 
}); 

Mais je reçois simplement un écran blanc par défaut avec le texte sans style.

La seule façon que je reçois toute sorte de style importé pour travailler en ce moment est en faisant ce

import {Container, styles} from '../components/Container'; 

    class Screen extends Component { 

    render() { 
     return (
     <Container backgroundColor={"red"}> 
     </Container> 
    ); 
    } 
} 

Container.js:

import React from 'react'; 
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    backgroundColor: 'blue' 
    }, 
    text: { 
    color: '#fff', 
    fontSize: 30, 
    fontWeight: '500' 
    } 

}); 

const Container = ({onPress, backgroundColor, texttest}) => (
    <View style={[styles.container, {backgroundColor}]}> 
    <Text style={styles.text}></Text> 
    </View> 
); 

export default Container; 

Cette approche n'est pas le meilleur parce qu'il Il est beaucoup plus difficile d'utiliser la même feuille de style pour chaque écran tout en étant capable de personnaliser l'écran.

Answer 1

Essayez de réécrire le fichier screenstyles.js comme suit:

const React = require('react-native-extended-stylesheet'); 
const { EStyleSheet } = React; 

var styles = EStyleSheet.create({ 
    container: { 
     flex: 1, 
     alignItems: 'center', 
     justifyContent: 'center', 
     backgroundColor: '$primaryBlue' 
    }, 
    basictext: { 
     color: "#fff", 
     fontSize: 34 
    } 
}); 

module.exports = styles;