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