react-native试玩(4)-新建项目
2015-08-27 13:18
756 查看
源码
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var helloworld = React.createClass({ render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } }); var 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('hellowrold',() => helloworld);
问题
AppRegistry.registerComponent('hellowrold',() => helloworld);中
registerComponent方法的第一个参数
hellowrold参数一定要跟项目名一样,否则就会报错。
总结
新建项目分5步:引入react-native
var React = require('react-native');
定义组件
var { AppRegistry, StyleSheet, Text, View, } = React;
定义界面控件
var helloworld = React.createClass({});
定义控件样式
var styles = StyleSheet.create({});
为项目注册界面
AppRegistry.registerComponent('项目名',() =>界面);
相关文章推荐
- React Native常用组件
- React学习笔记(1)--第一个程序
- [React] React Fundamentals: JSX Deep Dive
- [React] React Fundamentals: Build a JSX Live Compiler
- 说说ReactiveCocoa 2
- [ACdream 1211 Reactor Cooling]无源无汇有上下界的可行流
- ReactiveCocoa - iOS开发的新框架
- ReactJS入门二
- ReactiveCocoa基本组件:理解和使用RACCommand
- ReactJS入门学习二
- ReactiveCocoa 学习资料
- iOS.ReactNative-4-react-native
- ReactiveCocoa与Functional Reactive Programming
- ReactiveCocoa - iOS开发的新框架
- 前端框架react研究
- PNP管理器简析--基于ReactOS0.33
- 前端框架react研究
- Netty与Reactor模式
- react事件获取元素
- 高性能IO模型浅析-Reactor与Proactor