一、外部(组件+样式)+官方组件
index.js页面
//一、如果都写在index.ios文件中比较乱。在单独的一个文件中定义组件,使用Module.exports将组件导出为独立的模块。可以在其他文件中引用。
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
view
} from 'react-native';
// 三步骤 1、定义组件 2、定义组件样式 导出组件
//定义组件
var Header=React.createClass({
render:function(){
return (
<View styles={styles.container}>
<Text styles={styles.fontinfo}>布局</Text>
</View>
)
}
});
//组件样式
var styles=StyleSheet.create({
//层view
container:{
backgroundColor: "red", //中间没有横杆 脱空命名法
width:300,
height:400,
},
fontinfo:{
backgroundColor:"green",
width:300,
height:400,
},
});
//导出模块
module.exports = Header;
header.js页面
//一、引入 二、使用
var Header =require("./header");
//定义一个渲染容器。
var Header=React.createClass({
render:function(){
return (
<View styles={styles.container}>
{/* Header使用 */}
<Header></header>
</View>
)
}
});
二、(组件+样式)+官方组件
//一、在js 文件内写 引入官方组件
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
view
} from 'react-native';
/*二、在Web开发中,div是最重要的一个元素,是页面布局的基础。
在ReactNative开发中,View组件的作用类似于div。是最基本的组件,被看作是容器组件。*/
//三、、定义组件
var LessonStyle=React.createClass({
render:function(){
return (
<View styles={styles.container}>
<Text styles={styles.fontinfo}>布局</Text>
</View>
)
}
});
//四、定义样式
var styles=StyleSheet.create({
//层view
container:{
backgroundColor: "red", //中间没有横杆 脱空命名法
width:300,
height:400,
},
fontinfo:{
backgroundColor:"green",
width:300,
height:400,
}
});
AppRegistry.registerComponent('LessonStyle',()=>LessonStyle); //ios 调试注册模拟作用