react-native学习之路2项目的导入与导出

这里以android为例子（ios同理）

首先我们来看android的入口文件index.android.js文件

代码如下：

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

import SetupComponent from './js/SetupComponent'; //这里是引入react 组件

//注册这个APP 有2个参数 以我个人的理解第二个参数应该是以哪个组件为入口吧，我也是猜的

AppRegistry. registerComponent( 'CompanyApp', () => SetupComponent);

2.然后我们来看看引入的这个SetupComponent这个js里面的组件

代码如下：

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

import ElComponent,{ name, age} from './ElComponent';

//看到这里我们又在当前js里面导入了ElComponent并导入了name跟age两个值过来

export default class SetupComponent extends Component {

render() {

return (

< View style={ styles. container} >

< Text style={ styles. welcome} >

名字：{ name},年龄：{ age}

</ Text >

</ View >

);

}

}

const styles = StyleSheet. create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

});

AppRegistry. registerComponent( 'CompanyApp', () => CompanyApp);

3.同理我们看看 ElComponent

代码如下：

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

//从这个页面导出数据

var name= "张三";

var age= 18;

export { name, age}; //这个就是把name跟age变量导出到下一个页面 给下一个页面使用

export default class ElComponent extends Component {

render() {

return (

< View style={ styles. container} >

< Text style={ styles. welcome} >

Welcome to React Native!CompanyApp

</ Text >

</ View >

);

}

}

const styles = StyleSheet. create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

});

AppRegistry. registerComponent( 'CompanyApp', () => CompanyApp);

4.我们看下项目的运行结果