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

最新推荐文章于 2024-08-05 16:46:39 发布

原创最新推荐文章于 2024-08-05 16:46:39 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

react-native 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了React Native应用的启动流程，从入口文件index.android.js开始，逐步介绍如何加载和渲染组件，以及数据传递的过程。

这里以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.我们看下项目的运行结果