React Native - 将组件导出(exports)成独立模块(附使用样例)
在项目开发中常常有一些功能组件在许多页面中都是可以复用的。本文演示如何将自定义组件导出成独立的模块,以及如何导入使用这个模块。
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);