初探React-Native

props

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。

以常见的基础组件Image为例,在创建一个图片时,可以传入一个名为source的prop来指定要显示的图片的地址,以及使用名为style的prop来控制其尺寸。

e.g

import React, { Component } from ‘react‘;
import { AppRegistry, Image } from ‘react-native‘;

class TianXin extends Component {
  render() {
    let pic = {
      uri: ‘http://img4q.duitang.com/uploads/item/201506/25/20150625170821_hzsVL.jpeg‘
    };
    return (
      <Image source={pic} style={{width: 200, height: 200}} />
    );
  }
}

AppRegistry.registerComponent(‘Bananas‘, () => TianXin);

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props,然后按需处理即可。下面是一个例子:

import React, { Component } from ‘react‘;
import { AppRegistry, Text, View } from ‘react-native‘;

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: ‘center‘}}>
        <Greeting name=‘Rexxar‘ />
        <Greeting name=‘Jaina‘ />
        <Greeting name=‘Valeera‘ />
      </View>
    );
  }
}

AppRegistry.registerComponent(‘LotsOfGreetings‘, () => LotsOfGreetings);
时间: 2024-10-08 10:29:29

初探React-Native的相关文章

React Native 技术 开发跨平台 Native App 初探

转载请注明出处:http://blog.csdn.net/smartbetter/article/details/64190798 我们已经了解像 Titanium 和 PhoneGap 等框架,它们能让开发者用 Web 技术构建移动应用.这是一个优势,支持开发者使用原先网络和移动开发的相关技术.仅如此,相同的代码库经过小幅度的修改便能适用多个平台--这就是著名的一次编写,到处运行.然而,当涉及到构建应用的性能时,这些框架的缺点显露无遗,尽管它们有一些吸引力,但却一直更适用于构建原生应用.Rea

React Native初探

前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. PS:任何新技术的尝鲜都一定要控制在自己能控制的范围内,失败了会有可替换方案,不要引起不可逆的问题,这样会给团队造成灾难性的后果. 事实上,RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一: ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快

React Native IOS源码初探

原文链接 http://www.open-open.com/lib/view/open1465637638193.html 每个项目都有一个入口,然后进行初始化操作,React Native 也不例外.一个不含 Objective-C 代码的项目留给我们的唯一线索就是位于 AppDelegate 文件中的代码: RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"re

React Native 初探

推荐文章 React Native 简介:用 JavaScript 搭建 iOS 应用 (1) React Native 简介:用 JavaScript 搭建 iOS 应用 (2) React Native入门实例教程系列文章 React Native组件开发系列文章 React Native 环境搭建 - Mac版 1. 安装homebrew 用brew -v查看是否安装过: 如果没有,则浏览器访问 http://brew.sh/ 安装 2. 安装node 用node -v查看是否安装过 安装

React Native For Android 架构初探

Facebook 在2015.9.15发布了 React Native for Android,把JavaScript 开发技术扩展到了Android平台.React Native 让开发者使用 JavaScript 和 React 编写应用,利用相同的核心代码就可以创建 基于Web,iOS 和 Android 平台的原生应用.本文将浅析Android React的架构及相关基础知识.环境搭建及调试相关知识参考官网文档即可,本文不再赘述. 一.React架构分析 1.层次架构: Java层:ja

Facebook React Native 初探

这周末参加了UPYUN的移动沙龙,就提到了React Native,今天就写一篇教程. 首先要配置环境,如果没有就执行下面的工作. 1.安装Homebrew打开终端 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2.安装node brew install node 3.安装 brew install watchman 4.安装 brew install

React Native Android 从学车到补胎和成功发车经历

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 好几个月没发车了,完全生疏了,为了接下来能持续性的发好车,这次先准备发个小车-- React Native.没错,就是这个从去年到现在官方都憋不出大招 1.0 版本,而被我朝开发者疯狂追捧备受争议的破车.怎么说呢,这玩意刚出来时有了解过,当时的内心是抵触的,但是内心总是架不住天朝的炒作能力,更架不住硬性指标,于是我就这么被 React Native 蹂躏了一番,也

移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native

React Native使用初探 February 06 2015 Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法.该方法运用了React.js的所有强大的功能来将其应用到原生应用.你可以通过使用其内嵌的基本元素来编写基于Javascript的组件,这些组件都是拥有着iOS和Android控件的支撑的. 首先,我知道Facebook现在还没有完全将其开源是个很挫的事情啦,但他们现在正在将该项目往开源的方向推进了.他们现

东方耀 手把手教React Native实战开发视频教程+源码笔记全集

课程序号标题 第0课0.手把手教React Native实战之开山篇_视频 第1课1.手把手教React Native实战之环境搭建_视频_Windows环境 第1课1.手把手教React Native实战之环境搭建[Mac真机]同时调试开发Android&IOS 第2课2.手把手教React Native实战之从React到RN 第3课3.手把手教React Native实战之flexbox布局(RN基础) 第4讲4.手把手教React Native实战之flexbox布局(伸缩属性) 第5讲

最火移动端跨平台方案盘点:React Native、weex、Flutter

1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需要跨平台开发? 本质上,跨平台开发是为了增加代码复用,减少开发者对多个平台差异适配的工作量,降低开发成本,提高业务专注的同时,提供比web更好的体验.嗯-通俗了说就是:省钱.偷懒. 目前移动端跨平台开发中,备受关注的方案大致归纳为以下几种情况: 1)react native.weex均使