React Native :如何从另一个文件 js 导入弹性框样式

Question

我是 React Native 的新手，我尝试从教程点学习基本的 flexbox，但我总是收到错误，我有两个文件 index.android.js 和 MyPresentationalComponent.js用于样式代码文件。

这个错误图片，当我运行我的项目

索引.安卓.js

import React, { Component } from 'react';
import {
  AppRegistry,
  styles,
  View
} from 'react-native';
import MyPresentationalComponent from './MyPresentationalComponent';
export default class belajar extends Component {
   constructor() {
      super();
      this.state = {
         myText: 'Lorem ipsum dolor sit amet.'
      };
   }
   render() {
      return (
         <View>
                <MyPresentationalComponent style={styles.container} />
         </View>
      );
   }
}
AppRegistry.registerComponent('belajar', () => belajar);

MyPresentationalComponent.js

import React, { Component } from 'react';
import {
   View,
   StyleSheet
} from 'react-native';
const MyPresentationalComponent = (props) => {
   return (
      <View style={styles.container}>
         <View style={styles.redbox} />
         <View style={styles.bluebox} />
         <View style={styles.blackbox} />
      </View>
   );
};
export default MyPresentationalComponent;
const styles = StyleSheet.create({
   container: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
});

Answer 1

问题是您没有将styles变量导出文件，因此即使您导入标有 export default 的类，它也不会对其他文件可见。我建议如下：

import React, { Component } from 'react';
import {
   View,
   StyleSheet
} from 'react-native';
const MyPresentationalComponent = (props) => {
   return (
      <View style={styles.container}>
         <View style={styles.redbox} />
         <View style={styles.bluebox} />
         <View style={styles.blackbox} />
      </View>
   );
};
export default MyPresentationalComponent;
export const styles = StyleSheet.create({
   container: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
});

然后，你的index.android.js应该看起来像这样：

import React, { Component } from 'react';
import {
  AppRegistry,
  styles,
  View
} from 'react-native';
import MyPresentationalComponent, {styles} from './MyPresentationalComponent';
export default class belajar extends Component {
   constructor() {
      super();
      this.state = {
         myText: 'Lorem ipsum dolor sit amet.'
      };
   }
   render() {
      return (
         <View>
                <MyPresentationalComponent style={styles.container} />
         </View>
      );
   }
}
AppRegistry.registerComponent('belajar', () => belajar);

请注意取消出口和指定出口之间的区别。您可以只有一个默认导出，并且您为其指定的名称根本不相关，当您导入它时，它可以使用不同的名称。对于命名导入，需要使用大括号表示法，并且名称在 export 和 import 中必须相同。但是，您可以根据需要拥有任意数量的它们。

Answer 2

根据赫尔

佐格@Gui答案简化解决方案，包括任何外部样式文件可以完成：

样式表文件

    import {
        StyleSheet
      } from 'react-native';
    export default styles = StyleSheet.create({
// or export const styles = StyleSheet.create({
        Container: {
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#fff',
        },
      })

不仅仅是在组件中使用：

import styles from './styles'
// or import { styles } from './styles'

用：

<View style={styles.Container}>

Answer 3

问题是因为你只导出组件MyPresentationalComponent而不是它的样式表。如果你想拥有全局样式，我建议你创建一个不同的文件。您可以将其称为Styles.js并将其导出，以便可以在所需的所有组件上使用。例如：

import { StyleSheet } from 'react-native'
module.exports = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'grey',
        height: 600
    },
})

然后，您可以使用以下命令将其导入到MyPresentationalComponent和Index.js：

import STYLES from 'Styles.js'

要使用，您可以：

<Component style={STYLES.container} />

希望这有帮助！