1

我最近在我的项目中添加了 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>
     );
  }
}

容器.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;

这种方法不是最好的，因为它使得为每个屏幕使用相同的样式表变得更加困难，但仍然能够自定义屏幕。

4

1 回答 1

0

尝试重写 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;
于 2018-03-10T20:51:02.823 回答