react-native介绍

1. react-native的诞生
1.1 移动app的主要几种开发模式
Web App(⺴⻚应用) Hybrid App(混合应用) Native App(原生应用)
开发成本 维护更新 用户体验 发版审核 安装部署 跨平台性
低 简单 差 不需要 免安装 优
中 简单 中 需要(可做增量) 需安装(可做增量) 优
例
2.5 react-native项目的工程结构分析-4
Step4. 在组件内部定义属性值与方法，并使用{}进行调用
var DatePickerExample= React.createClass({ getDefaultProps: function () { return { date: new Date(), timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60, }; }, getInitialState: function() { return { date: this.props.date, timeZoneOffsetInHours: this.props.timeZoneOffsetInHours, }; },
1.5 React-native的开发模式
“Learn once, write anywhere”
Web iOS Android
Virtual DOM
React (JS/JSX)
2. react-native的开发与实践
2.1 React-native的准备开发环境
1. Nodejs：react-native开发的基础工具包基于nodejs搭建， 推荐安装V12.02或更新的版本进行使用； 2. 原生开发环境：需要安装好ios sdk+xcode和android sdk进 行相关开发，可以用模拟器和真机调试等多种方式； 3. Chrome：基于chrome上安装react-native tools，可做布局 效果预览和代码断点调试； 4. IDE：推荐使用webstorm，能非常方便的集成各种工具，同 时语法检测和智能提醒也很完备； 5. 翻墙 (推荐)：facebook荣誉出品，你懂的….
例
render: function() { return (
例
<View> <WithLabel label="Timezone:"> <TextInput style={styles.textinput} value={this.state.timeZoneOffsetInHours}/> </WithLabel> </View> ); }, });
1.4 React-native的开发特点
1. React Native里面没有webview，运行性能会更好； 2. 采用了类似css flexbox的布局理念完成页面布局； 3. 扩展性更强，Native端提供的是基本控件，JS可以自由组合 使用，前端工程师和客户端工程师各司其职； 4. 支持直接热更新和远程调试； 5. 能直接调用原生平台的动画效果，运动更流畅； 6. 尊重平台特性，不强求一份原生代码支持多个平台
2.5 react-native项目的工程结构分析-2
Step2. 写一个自定义组件，与标准的react组件写法类似
var AwesomeProject = React.createClass({ getInitialState() { return {active: false,}; }, _onHighlight() { this.setState({active: true}); }, render: function() { return ( <View style={styles.container}><Text> To get started, edit index.ios.js</Text></View> ); } });
例
2.5 react-native项目的工程结构分析-3
Step3. 通过AppRegistry.registerComponent来注册我们的根组件
var AwesomeProject = React.createClass({ render: function () { return ( <View style={styles.container}> <ModalExample/> </View> ); } }); // 将我们的根组件放置到native app中的顶层view当中 AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
React-Native 介绍
A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT 黄健@内部工具研发组
Topic
1. react-native的诞生 2. react-native的开发与实践 3. react-native的延伸与思考 4. 4. Q & A
2.5 react-native项目的工程结构分析-7
Step6. 组件复合，通过结合小巧，简单的组件和数据对象构造大而复 杂的组件
<View> <Modal animated={this.state.animated} transparent={this.state.transparent} visible={this.state.modalVisible}> <View style={[styles.innerContainer, innerContainerTransparentStyle]}> <Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text> <Button onPress={this._setModalVisible.bind(this, false)} style={styles.modalButton}>Close </Button> <WithLabel label="false"> <TextInput autoCorrect={false} style={styles.default} /> </WithLabel> </View> </Modal> <View>
Step5. 通过将事件处理器绑定到组件上来处理各种事件，更改状态;
var DatePickerExample= React.createClass({
例
getInitialState() { }, return { active: false};
getInitialState: function() { return { date: this.props.date, timeZoneOffsetInHours: this.props.timeZoneOffsetInHours, }; }, onTimezoneChange: function(event) { var offset = parseInt(event.nativeEvent.text, 10); if (isNaN(offset)) {return; } this.setState({timeZoneOffsetInHours: offset}); }
2.2 快速创建一个react-native的项目
React Native的项目初始化需要基于 react-native-cli 进行构建。
例
1. 2. 3. 4. 5. 6. 7. 8. 9.
npm install -g react-native-cli； react-native init AwesomeProject； 安装chrome调试插件：React Developer Tools；
render: function() { return (
例
<View> <WithLabel label="Timezone:"> <TextInput onChange={this.onTimezoneChange} style={styles.textinput} value={this.state.timeZoneOffsetInHours.toString()}/> </WithLabel> </View> ); }, });
2.3 react-native项目的工程结构分析-5
补充说明：react-native的组件生命周期与props、states等理念与 react标准组件理念一致。
一.随着组件被定义和调用，以下的方法会被 依次调用； 1. 2. 3. 4. 5. getDefaultProps getInitialState componentWillMount Render componentDidMount
参考链接：为什么移动web移动程序很慢？
1.3 React-native的诞生
react-native是facebook开源的一款跨平台UI开发框架，相对于其 他的hybrid的框架，其所面向的工作环境已经跳出了浏览器环境， 能做到既拥有原生native的交互体验，又能够保持web的高效与灵 活，因此发布起就引起了业内极大的关注，目前已经可支持iOS和 andorid两套平台。
例
2.5 react-native项目的工程结构分析-8