初识React Native
2016-06-03 18:41
627 查看
简介
Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React NativeReact Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
环境搭建
对于Android开发者来说,只需要下载node和React Native即可(以下方案针对于mac)下载node:
brew install node
下载React Native
npm install -g react-native-cli
新建React Native项目
react-native init HelloReact
## 项目介绍
### Package.json
{ "name": "HelloReact", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "^15.0.2", "react-native": "^0.26.2" } }
这里主要放的配置,跟Android的 build.gradle 文件差不多
Index.android.js
/** * Sample React Native App * https://github.com/facebook/react-native */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class HelloReact extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> hello React </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('hello', () => HelloReact);
如果Android和ios的代码是不相同的话,那就在各自的文件中编码,如果相同的话,可以把最后一行直响通用的component,减少代码的重复编写
简单介绍一下上面的代码:
新建了一个HelloReact
新建HelloReact,继承自Component(
在HelloReact中添加组件
然后去美化组件
最后最重要的一步注册组件
AppRegistry.registerComponent('hello', () => HelloReact);
解释一下这一行代码,第一个参数随便写,但是要跟android或者ios中相对应,Android中的MainActivity中有一个getMainComponentName方法,它的返回值要跟这里的第一个参数对应,第二个要指向入口的Component
/** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "hello"; }
注:用到的组件都需要手动去注册,如:在HelloReact中用到Text,需要手动在react-native中引入Text
相关文章推荐
- 详解HDFS Short Circuit Local Reads
- SQL Server Native Client下载 SQL Server Native Client安装方法
- 超级给力的JavaScript的React框架入门教程
- JavaScript的React框架中的JSX语法学习入门教程
- 由ReactJS的Hello world说开来
- 深入探讨前端框架react
- 详解Java中native关键字
- 深入浅析react native es6语法
- Windows下React Native的Android环境部署及布局示例
- 深入理解JavaScript的React框架的原理
- 在React框架中实现一些AngularJS中ng指令的例子
- hadoop安装lzo
- H5、React Native、Native应用对比分析
- react Native 运行程序报错解决笔记
- CSS Modules 详解及 React 中实践
- 初体验react的状态机