Here is an example of android (similar to ios)
First, let's look at the android entry file index.android.js file
code show as below:
/**
* 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'
; // here is the introduction of react components
// There are 2 parameters to register this APP. According to my personal understanding, which component should be the entry for the second parameter, I also guessed
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.我们看下项目的运行结果
