添加 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;