React Native - 将组件导出（exports）成独立模块（附使用样例）

2017-02-03 发布：hangge 阅读：3207

在项目开发中常常有一些功能组件在许多页面中都是可以复用的。本文演示如何将自定义组件导出成独立的模块，以及如何导入使用这个模块。

1，效果图

通常许多页面的头部是一样的。这里我们以封装一个公用的头部组件为例。

2，组件代码

我们把下面的组件代码放在 header.js 文件中，代码的最后我们将其 export 成独立的模块。

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 PixelRatio,
} from 'react-native';

export default class Header extends Component {
   render() {
     return (
       <View style={styles.flex}>
         <Text style={styles.font}>hangge.com</Text>
       </View>
     );
   }
}

const styles = StyleSheet.create({
 flex:{
    marginTop:20,
    height:50,
    borderBottomWidth:3/PixelRatio.get(),
    borderBottomColor:'#2D9900',
    alignItems:'center', /*使Text组件水平居中*/
    justifyContent:'center' /*使Text组件垂直居中*/
 },
 font:{
    color:"#2D9900",
    fontSize:25,
    fontWeight:'bold',
    textAlign:'center' /*使文字在Text组件中居中*/
  },
});

3，使用样例

使用时我们通过 require 函数将 Header 组件加载进来即可。

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
} from 'react-native';

import Header from './header'

class Main extends Component {
   render() {
     return (
       <View style={styles.flex}>
         <Header></Header>
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
  flex:{
     flex:1
  },
 });

 AppRegistry.registerComponent('HelloWorld', () => Main);