react-native-navigationを追加した後に読み込まれたスタイルシートが機能しない

Question

最近、プロジェクトに反応ネイティブナビゲーションを追加しました。インポートされたスタイルシートを動作させることができません。私は何をしようとしていることはこれです：

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 
    } 
}); 

しかし、私は単純にunstyledテキストでデフォルト白い画面を取得します。

私は現時点で動作するようにインポートされたスタイリングの任意の並べ替えを取得する唯一の方法は、この

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; 

このアプローチは、それ理由が最善ではありません各画面で同じスタイルシートを使用するのは難しくなりますが、それでも画面をカスタマイズできるようになります。

Answer 1

次のようにscreenstyles.jsファイルを書き換えてみてください

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;