本文主要包括以下内容

  1. View组件的实例
  2. Text组件实例
  3. Navigator组件实例
  4. TextInput组件实例

View组件的实例

效果如下

代码如下

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  * @flow
  5.  */
  7. import React, { Component } from 'react';
  8. import {
  9.   AppRegistry,
  10.   StyleSheet,
  11.   Text,
  12.     PixelRatio,
  13.   View
  14. } from 'react-native';
  16. class Abc extends Component {
  17.   render() {
  18.     return (
  19.      <View style={styles.flex}>
  20.       <View style={styles.container}>
  21.         <View style={[styles.item,styles.center]}>
  23.           <Text style={styles.font}>酒店</Text>
  25.         </View>
  27.         <View style={[styles.item,styles.lineLeftRight]}>
  29.           <View style={[styles.center,styles.flex,styles.lineCenter]}>
  30.             <Text style={styles.font}>海外酒店</Text>
  31.           </View>
  33.           <View style={[styles.center,styles.flex]}>
  34.             <Text style={styles.font}>特惠酒店</Text>
  36.           </View>
  38.         </View>
  40.         <View style={styles.item}>
  42.           <View style={[styles.center,styles.flex,styles.lineCenter]}>
  43.             <Text style={styles.font}>团购</Text>
  44.           </View>
  46.           <View style={[styles.center,styles.flex]}>
  47.             <Text style={styles.font}>客栈，公寓</Text>
  49.           </View>
  51.         </View>
  52.       </View>
  54.         </View>
  55.     );
  56.   }
  57. }
  59. const styles = StyleSheet.create({
  60.  container: {
  61.     marginTop:200,
  62.     marginLeft:5,
  63.     marginRight:5,
  64.     height:84,
  65.     flexDirection:'row',
  66.     borderRadius:5,
  67.     padding:2,
  68.     backgroundColor:'#FF0067',
  69.   },
  70.   item: {
  71.     flex: 1,
  72.     height:80,
  74.   },
  75.   center:{
  76.     justifyContent:'center',
  77.     alignItems:'center',
  78.   },
  79.   flex:{
  80.     flex:1,
  81.   },
  82.   font:{
  83.     color:'#fff',
  84.     fontSize:16,
  85.     fontWeight:'bold',
  86.   },
  87.   lineLeftRight:{
  88.     borderLeftWidth:1/PixelRatio.get(),
  89.     borderRightWidth:1/PixelRatio.get(),
  90.     borderColor:'#fff',
  91.   },
  92.   lineCenter:{
  93.     borderBottomWidth:1/PixelRatio.get(),
  94.     borderColor:'#fff',
  95.   },
  96. });
  98. AppRegistry.registerComponent('Abc', () => Abc);

Text组件实例

head.js

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  * @flow
  5.  */
  7. import React, { Component } from 'react';
  8. import {
  9.   AppRegistry,
  10.   StyleSheet,
  11.   Text,
  12.     PixelRatio,
  13.   View
  14. } from 'react-native';
  16. class Header extends Component {
  17.   render() {
  18.     return (
  19.        <View style={styles.flex}>
  20.                 <Text style={styles.font}>
  22.                     <Text style={styles.font_1}>网易</Text>
  23.                     <Text style={styles.font_2}>新闻</Text>
  24.                     <Text>有态度"</Text>
  25.                 </Text>
  27.         </View>
  28.     );
  29.   }
  30. }
  32. const styles = StyleSheet.create({
  33.   flex:{
  34.         marginTop:25,
  35.         height:50,
  36.         borderBottomWidth:3/PixelRatio.get(),
  37.         borderBottomColor:'#EF2D36',
  38.         alignItems:'center',
  39.     },
  40.     font:{
  41.         fontSize:25,
  42.         fontWeight:'bold',
  43.         textAlign:'center',
  44.     },
  45.     font_1:{
  46.         color:'#CD1D1C',
  47.     },
  48.     font_2:{
  49.         color:'#FFF',
  50.         backgroundColor:'#CD1D1C',
  51.     },
  52. });
  54. module.exports=Header;

将head.js导入到主JS中的代码为const Header=require(‘./head’);

主JS详细代码

实现了列表，并且有点击效果

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  * @flow
  5.  */
  7. import React, { Component } from 'react';
  8. import {
  9.   AppRegistry,
  10.   StyleSheet,
  11.   Text,
  12.     PixelRatio,
  13.   View
  14. } from 'react-native';
  16. const Header=require('./head');
  18. class Abc extends Component {
  19.   render() {
  20.     return (
  21.      <View style={styles.flex}>
  22.             <Header></Header>
  23.             <List title='一线城市楼市退烧 有房源一夜跌价160万'></List>
  24.             <List title='上海市民称墓地太贵买不起 买房存骨灰'></List>
  25.             <List title='朝鲜再发视频:摧毁青瓦台 一切化作灰烬'></List>
  26.             <List title='生活大爆炸人物原型都好牛逼'></List>
  28.              <ImportantNews
  29.                 news={[
  30.                 '解放军报报社大楼正在拆除 标识已被卸下(图)',
  31.                 '韩国停签东三省52家旅行社 或为阻止朝旅游创汇',
  32.                 '南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻',
  33.                 '防总部署长江防汛:以防御98年量级大洪水为目标'
  34.                 ]}>
  35.             </ImportantNews>
  36.       </View>
  38.     );
  39.   }
  40. }
  42. class List extends Component{
  43.     render(){
  44.         return (
  45.             <View style={styles.list_item}>
  46.                <Text style={styles.list_item_font}>{this.props.title}</Text>
  47.             </View>
  48.         );
  49.     }
  50. }
  52. class ImportantNews extends Component{
  54.     show(title){
  56.         alert(title);
  58.     }
  60.     render(){
  61.         var news=[];
  62.         for(var i in this.props.news){
  63.             var text=(
  64.                 <Text
  65.                     onPress={this.show.bind(this,this.props.news[i])}
  66.                     numberOfLines={2}
  67.                     style={styles.news_item}
  68.                     key={i}
  70.                     >{this.props.news[i]}</Text>
  71.             );
  72.             news.push(text);
  73.         }
  74.         return (
  75.             <View style={styles.flex}>
  76.                 <Text style={styles.news_title}>今日要闻</Text>
  77.                 {news}
  79.             </View>
  81.         );
  82.     }
  83. }
  85. const styles = StyleSheet.create({
  86.   flex:{
  87.     flex:1,
  88.   },
  90.     list_item:{
  91.         height:40,
  92.         marginLeft:10,
  93.         marginRight:10,
  94.         borderBottomWidth:1,
  95.         borderBottomColor:'#ddd',
  96.         justifyContent:'center',
  97.     },
  99.     list_item_font:{
  100.         fontSize:16,
  101.     },
  103.     news_item:{
  104.         marginLeft:10,
  105.         marginRight:10,
  106.         fontSize:15,
  107.         lineHeight:40,
  108.     },
  110.     news_title:{
  111.         fontSize:20,
  112.         fontWeight:'bold',
  113.         color:'#CD1D1C',
  114.         marginLeft:10,
  115.         marginTop:15,
  117.     },
  118. });
  120. AppRegistry.registerComponent('Abc', () => Abc);

效果如下

Navigator组件实例

实现了页面跳转和通过Navigator传递数据并回传数据，在componentDidMount中获取传递过来的数据

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  * @flow
  5.  */
  7. import React, { Component } from 'react';
  8. import {
  9.   AppRegistry,
  10.   StyleSheet,
  11.    Navigator,
  12.    ScrollView,
  13.   Text,
  14.     PixelRatio,
  15.   View
  16. } from 'react-native';
  18. const Header=require('./head');
  20. class Abc extends Component {
  21.   render() {
  22.      let defaultName='List';
  23.       let defaultComponent=List;
  24.     return (
  25.         <Navigator
  26.             initialRoute={{ name: defaultName, component: defaultComponent }}
  27.             //配置场景
  28.             configureScene=
  29.                 {
  30.             (route) => {
  32. //这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，有源代码的: node_modules/react-//native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
  34.             return Navigator.SceneConfigs.VerticalDownSwipeJump;
  35.           }
  36.           }
  37.             renderScene={
  38.             (route, navigator) =>
  39.              {
  40.             let Component = route.component;
  41.             return <Component {...route.params} navigator={navigator} />
  42.           }
  43.           } />
  45.     );  }
  46. }
  48. class List extends Component {
  50.     constructor(props) {
  51.         super(props);
  52.         this.state = {
  53.              id:1,
  54.             user:null,
  55.         };
  56.     }
  58.     _pressButton() {
  59.         const { navigator } = this.props;
  60.         //为什么这里可以取得 props.navigator?请看上文:
  61.         //<Component {...route.params} navigator={navigator} />
  62.         //这里传递了navigator作为props
  63.         const self=this;
  64.          if(navigator) {
  65.             navigator.push({
  66.                 name: 'Detail',
  67.                 component: Detail,
  68.                 params:{
  69.                     id:this.state.id,
  70.                     //从详情页获取user
  71.                     getUser: function(user) {
  72.                         self.setState({
  73.                             user: user
  74.                         })
  75.                     }
  76.                 }
  77.             })
  78.         }
  79.     }
  81.     render(){
  82.          if(this.state.user){
  83.             return(
  84.                 <View>
  85.                     <Text style={styles.list_item}>用户信息: { JSON.stringify(this.state.user) }</Text>
  86.                 </View>
  87.             );
  88.         }else{
  89.         return (
  90.             <ScrollView style={styles.flex}>
  91.                <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >☆ 豪华邮轮济州岛3日游</Text>
  92.                 <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>☆ 豪华邮轮台湾3日游</Text>
  93.                 <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>☆ 豪华邮轮地中海8日游</Text>
  94.             </ScrollView>
  95.         );
  96.     }
  97.     }
  99. }
  101. const USER_MODELS = {
  102.     1: { name: 'mot', age: 23 },
  103.     2: { name: '晴明大大', age: 25 }
  104. };
  106. class Detail extends Component{
  108.     constructor(props) {
  109.         super(props);
  110.         this.state = {
  111.              id:null
  113.         };
  114.     }
  116.       componentDidMount() {
  117.         //这里获取从FirstPageComponent传递过来的参数: id
  118.         this.setState({
  119.             id: this.props.id
  120.         });
  121.     }
  123.     _pressButton() {
  124.         const { navigator } = this.props;
  125.         if(this.props.getUser) {
  126.             let user = USER_MODELS[this.props.id];
  127.             this.props.getUser(user);
  128.         }
  129.         if(navigator) {
  130.             //很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:List了
  131.             navigator.pop();
  132.         }
  133.     }
  135.     render(){
  136.         return(
  138.             <ScrollView>
  139.              <Text style={styles.list_item} >传递过来的用户id是：{this.state.id}</Text>
  140.               <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >点击我可以跳回去</Text>
  142.             </ScrollView>
  144.         );
  145.     }
  146. }
  148. const styles = StyleSheet.create({
  149.   flex:{
  150.     flex:1,
  152.   },
  153.     list_item:{
  154.         height:40,
  155.         marginLeft:10,
  156.         marginRight:10,
  157.         fontSize:20,
  158.         borderBottomWidth:1,
  159.         borderBottomColor:'#ddd',
  160.         justifyContent:'center',
  161.     },
  162. });
  164. AppRegistry.registerComponent('Abc', () => Abc);

效果如下

TextInput组件实例

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  * @flow
  5.  */
  7. import React, { Component } from 'react';
  8. import {
  9.   AppRegistry,
  10.   StyleSheet,
  11.    Navigator,
  12.    ScrollView,
  13.    TextInput,
  14.   Text,
  15.     PixelRatio,
  16.   View
  17. } from 'react-native';
  19. class Abc extends Component {
  20.   render() {
  22.            return (
  24.             <View style={[styles.flex,styles.topStatus]}>
  26.                 <Search></Search>
  28.             </View>
  30.         );
  31.        }
  32. }
  34. class Search extends Component {
  35.     render(){
  36.         return(
  37.             <View style={[styles.flex,styles.flexDirection]}>
  38.                 <View style={[styles.flex,styles.input]}>
  40.                     <TextInput  returnKeyType="search" />
  42.                 </View>
  44.                 <View style={styles.btn}>
  45.                     <Text style={styles.search}>搜索</Text>
  46.                 </View>
  47.             </View>
  49.         );
  50.     }
  51. }
  53. const styles = StyleSheet.create({
  55.     flex:{
  56.         flex:1,
  58.     },
  59.     flexDirection:{
  60.         flexDirection:'row',
  61.     },
  62.     topStatus:{
  63.         marginTop:25,
  64.     },
  65.     input:{
  66.         height:45,
  67.         borderColor:'red',
  68.         borderWidth:1,
  69.         marginLeft:10,
  70.         paddingLeft:10,
  71.         borderRadius:5,
  73.     },
  74.     btn:{
  75.         width:45,
  76.         marginLeft:-5,
  77.         marginRight:5,
  78.         backgroundColor:'#23BEFF',
  79.         height:45,
  80.         justifyContent:'center',
  81.         alignItems:'center',
  82.     },
  83.     search:{
  84.         color:'#fff',
  85.         fontSize:15,
  86.         fontWeight:'bold',
  87.     },
  88. });
  90. AppRegistry.registerComponent('Abc', () => Abc);

效果如下

React Native实例的更多相关文章

  1. React Native实例之房产搜索APP

    React Native 开发越来越火了,web app也是未来的潮流, 现在react native已经可以完成一些最基本的功能. 通过开发一些简单的应用, 可以更加熟练的掌握 RN 的知识. 在学 ...

  2. React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

    React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...

  3. React Native之FlatList的介绍与使用实例

    React Native之FlatList的介绍与使用实例 功能简介 FlatList高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件 ...

  4. 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

  5. 【React Native开发】React Native For Android环境配置以及第一个实例(1)

    年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟,可是也没有阻挡了广大开发人员的热情.能够这样讲在2015年移动平台市场上有两个方向技术研究 ...

  6. 【React Native开发】React Native控件之ListView组件解说以及最齐全实例(19)

    ),React Native技术交流4群(458982758).请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...

  7. 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)

    ),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Im ...

  8. React Native ——入门环境搭配以及简单实例

    一.Homebrew 是OS X 的套件管理器. 首先我们需要获取 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent. ...

  9. React Native：使用 JavaScript 构建原生应用

    [转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...

随机推荐

  1. iOS 图片 的 聊天气泡显示 Objective-C

    - (void)viewDidLoad { [super viewDidLoad]; UIImageView *ImageView01 = [[UIImageView alloc] init]; [I ...

  2. Xcode 中的黄色文件夹/蓝色文件夹

    蓝色.黄色首先是和你导入文件夹时的勾选项目有关系: 黄色:-->group 蓝色:--> folder 在group中的.m/.h文件,#import "xxxxx.h" ...

  3. VirtualBox CentOS安装增强功能与设置共享文件夹

    如果安装的是CentOS minimal版无网络的可以看这篇文章. 一.安装依赖环境 依次执行如下命令 yum install update yum install kernel-headers yu ...

  4. Opencv角点检测

    #include "stdafx.h" #define max_corners 20 int main() { int cornerNum = max_corners; vecto ...

  5. Python自动化之sqlalchemy关联查询

    外键关联 from sqlalchemy import ForeignKey from sqlalchemy.orm import relationship class Address(Base): ...

  6. COGS 902 乐曲主题 题解 & hash入门贺

    [题意] 给定一个长为n的序列,元素都是不超过88的正整数,求序列中主题的最大长度. 所谓主题是指在序列中出现了至少两次并且不相交的子串.特别的,主题可以变调,也就是说如果一个子串全部加上或减去一个数 ...

  7. Jquery ajax调用webservice总结

    jquery ajax调用webservice(C#)要注意的几个事项: 1.web.config里需要配置2个地方 <httpHandlers>      <remove verb ...

  8. poj 1220（短除法）

    http://poj.org/problem?id=1220 题意:进制转换,把a进制转换为b进制. 如果数据不大的话,那么这个题还是很简单的,但这个题就是数据范围太大,所以这里可以采用短除法来做. ...

  9. poj 1700

    http://poj.org/problem?id=1700 题目大意就是一条船,有N个人需要过河,求N个人最短过河的时间 #include <stdio.h> int main() { ...

  10. Java从网络读取图片并保存至本地

    package cn.test.net; import java.io.File; import java.io.FileOutputStream; import java.io.InputStrea ...