初识React Native
简介Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native React 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,减少代码的重复编写 简单介绍一下上面的代码:
/** * 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |