添加react-native-navigation后导入的样式表无法正常工作

Question

我最近在我的项目中添加了react-native-navigation，现在我无法使用导入的样式表来工作。 我想要做的是这样的：

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

但我只是得到一个带有无样式文本的默认白色屏幕。

我现在获得任何类型的导入样式的唯一方法就是这样做

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;