React Native第一个Demo(1)
来源:互联网 发布:js定义一个json数组 编辑:程序博客网 时间:2024/05/29 17:21
在Demo主要是展示一个电影信息和在ListView展示25个电影信息。
1、初始化一个项目并运行
打开终端,输入:
react-native init DemoProject
输入后初始化一个项目返回信息如下:
有时候Installing react-native package from npm…
这一步会很慢,耐心等待,没问题的。
init DemoProjectThis will walk you through creating a new React Native project in /Users/iOSDev_szzc/Downloads/DemoProjectInstalling react-native package from npm...Setting up new React Native app in /Users/iOSDev_szzc/Downloads/DemoProjectreact@15.0.2 node_modules/react├── object-assign@4.1.0├── loose-envify@1.2.0 (js-tokens@1.0.3)└── fbjs@0.8.3 (immutable@3.8.1, ua-parser-js@0.7.10, promise@7.1.1, isomorphic-fetch@2.2.1, core-js@1.2.6)To run your app on iOS: cd /Users/iOSDev_szzc/Downloads/DemoProject react-native run-ios - or - Open /Users/iOSDev_szzc/Downloads/DemoProject/ios/DemoProject.xcodeproj in Xcode Hit the Run buttonTo run your app on Android: Have an Android emulator running (quickest way to get started), or a device connected cd /Users/iOSDev_szzc/Downloads/DemoProject react-native run-android
初始化成功,cd到DemoProject目录,运行
react-native run-ios
这个运行的大概原理就是用脚本编译并打开模拟器运行,模拟器打开后大概是这样的:
这证明你第一个react native项目运行成了。
2、显示一个电影描述
在项目中打开index.ios.js文件,复制下面代码,覆盖原来的代码,保存。然后在模拟器按下 Cmd+R,就能看到效果了。
import React, { Component,} from 'react';import { AppRegistry, Image, StyleSheet, Text, View,} from 'react-native';var MOCKED_MOVIES_DATA = [ {title: '爱丽丝梦游仙境2', year: '2016', posters: {thumbnail: 'http://pic.spider.com.cn/pic//filmpic/jdt/1462936153362_mobile2.jpg'}},];class DemoProject extends Component{ render() { var movie = MOCKED_MOVIES_DATA[0]; return ( <View style={styles.container}> <Text>{movie.title}</Text> <Text>{movie.year}</Text> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> </View> ); }};var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, thumbnail: { width: 53, height: 81, },});AppRegistry.registerComponent('DemoProject', () => DemoProject);
1.import
这里有两个import,分别是from react和react-native
react和react-native是两个东西,大家先有个概念.大概的区别,其他地方找了一个比较靠谱的解释:
ReactJs和React Native的原理是相同的,都是由js实现的虚拟dom来驱动界面view层渲染。
ReactJs是驱动html dom渲染; React Native是驱动android/ios原生组件渲染。
React 和 React Native的区别
import React, { Component,} from 'react';import { AppRegistry, Image, StyleSheet, Text, View,} from 'react-native';
2.模拟数据
相当于一个全局变量
var MOCKED_MOVIES_DATA = [ {title: '爱丽丝梦游仙境2', year: '2016', posters: {thumbnail: 'http://pic.spider.com.cn/pic//filmpic/jdt/1462936153362_mobile2.jpg'}},];
3.组件渲染
DemoProject相当于一个组件
class DemoProject extends Component{ render() { var movie = MOCKED_MOVIES_DATA[0]; return ( <View style={styles.container}> <Text>{movie.title}</Text> <Text>{movie.year}</Text> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> </View> ); }};
4.样式
定义组件和组件内控件的样式,
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, thumbnail: { width: 53, height: 81, },});
5.注册组件为程序入口
AppRegistry.registerComponent('DemoProject', () => DemoProject);
修改样式
改成下面这样的布局
+---------------------------------+|+-------++----------------------+||| || Title |||| Image || |||| || Year |||+-------++----------------------+|+---------------------------------+
增加三个样式和修改container的样式
container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, rightContainer: { flex: 1, }, title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, year: { textAlign: 'center', },
把return内容改为如下:
return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> );
Cmd+R刷新,效果如下
这个相当于给react native运行的web server端,不能关闭,如果关闭会模拟器提示 Could not connect to development server的。
如果不小心关闭了,运行这个命令可以启动
npm start
先写到这,一篇太长的话,会让人缺乏看下去的勇气。
这骗其实就是官网教程的一个简版和细化我认为比好的细节的版本。喜欢的同学可以直接访问官网学习:
http://facebook.github.io/react-native/docs/tutorial.html
- React Native第一个Demo(1)
- React Native第一个Demo(2)网络获取数据和ListView
- 【react-native】react-native Windows+Android 安装并运行起来第一个demo
- 第一个react native项目
- 第一个React native app
- react-redux第一个DEMO
- React-Native 基础(一) 我的第一个React-Native
- React Native——第一个示例
- React Native系列之-第一个app
- React native 第一个坑记录
- 第一个react-native工程,简单点
- React Native,第一个Hello word程序
- 我的第一个React Native App
- React Native 的第一个Android 项目
- 运行第一个React Native程序
- React Native运行第一个程序
- react native (二)‘电影列表demo’
- react native(七) 界面 UI-demo
- 使用MessageDigest生成MD5的问题
- 支撑万亿级访问的微博后端是怎么炼成的
- CUDA 和opencv安装问题
- Binary Tree Level Order Traversal
- jQuery .tmpl(), .template()学习
- React Native第一个Demo(1)
- Java中的隐藏和覆盖
- Python 字典详解
- OPENSSL X509证书验证
- Java中 String、StringBuffer 、StringBuilder 总结
- Java基础泛型篇一
- JQuery中ajax处理跨域的三大方式
- Hibernate与Ibatis比较
- 以Yii 2.0风格加载自定义类或命名空间 [配置使用Yii autoloader] [ 2.0 版本 ]