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

来源：互联网发布：上帝已死知乎编辑：程序博客网时间：2024/05/16 01:40

这里以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 SetupComponentfrom'./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 defaultclassSetupComponentextendsComponent {
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 defaultclassElComponentextendsComponent {
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.我们看下项目的运行结果

阅读全文

0 0