React Native：如何从另一个文件 js 中导入 flexbox 样式？答案

【问题标题】：React Native : how to import flexbox styles from another file js?React Native：如何从另一个文件 js 中导入 flexbox 样式？
【发布时间】：2018-10-03 19:19:14
【问题描述】：

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

This error picture, when I run myproject

index.android.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'
   },
});

【问题讨论】：

标签： react-native flexbox

【解决方案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 中的名称必须相同。但是，您可以拥有任意数量的它们。

【讨论】：

我试试你的建议，但我的设备只是显示白屏，你能解释一下吗？
检查您的样式是否正确。 Flexbox 有时有点棘手。另外，请注意，您没有使用任何时候传递给组件的样式 prop。
我可以在我删除 flex 时使用容器中的样式：1 但是当我在容器上添加 flex 时显示白屏

【解决方案2】：

问题是因为您只导出组件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} />

希望这会有所帮助！

【讨论】：

【解决方案3】：

根据@Gui Herzog 的回答，可以完成包含任何外部样式文件的更简单的解决方案：

样式表文件

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

【讨论】：