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

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

export default

然后，您的index.android.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;

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

请注意defaut导出和命名导出之间的区别。您只能有一个默认导出，并且您提供的名称根本不相关，导入时，它可以使用不同的名称。对于命名导入，您需要使用花括号表示法，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中的名称必须相同。但是，你可以拥有任意数量的它们。

Answer 2

问题是因为您只导出组件MyPresentationalComponent而不是其StyleSheet。如果您想拥有全局样式，我建议您创建一个不同的文件。您可以将其命名为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} />

希望这有帮助！

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

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

3 个答案: