react-native - react native : how to import flexbox styles from another file js?

Question

我是 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'
   },
});

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