React Native 入门
理念组件（components）工程师希望能像搭积木s 一样开发和维护系统，通过组装模块得到一个完整的系统。 数据-视图 state - render数据变化后，对应的视图部分就会变化。 语法ES6 vs ES5RN 官方文档的教程默认用的是 ES6 语法(但组件和API这块还夹杂着大量的ES5语法)。另外，RN 项目在本地 node_modules 有个 bable 的包，可以把 ES6 转换为 ES5，所以不用担心新语法不能被现有浏览器编译。 先简单介绍下默认项目中使用的几个 ES6 语法点，但不展开。 let 和 const 与 val 类似，都是用来声明变量的。 (x) => 2*x
// 相当于
function(x){return 2*x}
Class 类 //定义类
class Title {
// 构造函数
constructor(text) {
this.text= text;
}
// 原型链方法
render() {
return (
<header>this.text</header>
)
}
}
// ES5
function Title (text){
this.text= text;
}
Point.prototype.render= function () {
return '<header>'+this.text+'</header>';
}
继承 用 extends 继承类 class SubHeader extends Header {}
模块引用 // ES6
import { Component,StyleSheet,View } from 'react-native';
// 等同于
let _rn= require('react-native');
let Component= _rn.Component,StyleSheet= _rn.StyleSheet,View = _rn.View;
// 项目开始时，先引入默认模块和其他模块
import React,{
AppRegistry,Component,Image,ListView,Text,View,} from 'react-native';
JSX vs HTML(模板) & CSS & JSJSX 是一种混合 HTML、CSS 和 JS 的语法，所以在 JSX 中忘了结构、样式、行为分离吧。在 React 中只有模块，JSX这种语法也是为组件服务的。 最简单的组件render 方法用来渲染组件。每个组件由首先由最基本的 HTML 结构 或其他组件组成。 class TitleList extends Component{
render() {
return (
<View>
<Text>React Native</Text>
</View>
);
}
}
我们只要将数据 TitleList 输出到虚拟机的 app（MyProject）中，即可看到写好的文本。 // 将 TitleList 注入到 app 中
AppRegistry.registerComponent('MyProject',() => TitleList);
我们可以用变量代替文字。let title = 'React Native';
class TitleList extends Component{
render() {
return (
<View>
<Text>{title}</Text>
</View>
);
}
}
给组件加点样式直接在组件中写 style={} ，在中间使用对象的写法书写样式即可。 let title = 'React Native';
class TitleList extends React.Component{
render() {
return (
<View style={{flexDirection: 'row',height: 100,padding: 20}}>
<Text>React Native</Text>
</View>
);
}
}
当然也可用直接给个在 style 中 class 名let title = 'React Native';
const styles = StyleSheet.create({
title : {
flexDirection: 'row',padding: 20,}
});
class TitleList extends React.Component{
render() {
return (
<View style={styles.title }>
<Text>React Native</Text>
</View>
);
}
}
拼装组件有了单个 title 碎片后，希望把它拼装成一个真正的 list。我们需要引入一个原生组件 ListView ，并把定义的 title 组件和真实的数据拼装到 ListView 组件中去。 // 首先将 title 碎片 拿出来
renderTitle (titles) {
return (
<View style={styles.title}>
<Text >{titles.description}</Text>
</View>
);
}
// 引入一个原生组件 ListView
// 用 renderRow 属性引用 renderTitle 组件。
// 再将用 dataSource 属性引用数据，这里用 this.state.dataSource 表示数据，后续会对其初始化
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderTitle}
/>
);
}
组件的数据流 然后用 constructor 对 this.state.dataSource 初始化 constructor (props) {
// 继承父类
super(props);
// 实例化一个 ListView.DataSource 对象。并且只修改改变数据，这可以保证只渲染改动的地方。
// RN 的 state 属性对应的数据变了，那么组件就会被重新渲染。只修改局部数据，那么直有组件的局部被重新渲染。
let ListDate = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2});
// 初始化 ListView数据，注意 state 一般用于可能被事件触发并改变视图的数据。
this.state = {
dataSource: ListDate.cloneWithRows([
{ description: 'RN1' },{ description: 'RN2' },])
};
}
完整的组件class TitleList extends React.Component{
// 初始化
constructor (props) {
// 不知道干嘛用，不加会报错。
super(props);
// 实例化一个 ListView.DataSource 对象。并且只修改改变数据，这可以保证只渲染改动的地方。
// RN 的 state 属性对应的数据变了，那么组件就会被重新渲染。只修改局部数据，那么直有组件的局部被重新渲染。
let ListDate = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2});
// 初始化 ListView 数据
this.state = {
dataSource: ListDate.cloneWithRows([
{ description: 'RN1' },])
};
}
// 渲染
render() {
// ListView 是个原生组件
// dataSource 属性声明的是组件的数据
// renderRow 将 renderTitle 按排渲染
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderTitle}
/>
);
}
// title 碎片
renderTitle(titles){
return (
// styles 样式
<View style={styles.title}>
// dataSource 传来的数据
<Text >{titles.description}</Text>
</View>
);
}
}
工具 参考文献 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |