2.ReactNative Properties|States|Styles 笔记

原文地址:http://reactnative.cn/docs/0.31/props.html#content

1. property:

如下代码所示

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

class Bananas extends Component {
  render() {
    let pic = {
      uri: ‘https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg‘
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

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

  上面  <>中间包裹的对象,source={ xxx }  其中source就是图片的属性,代表它的源地址. 类似于HTML中src="http://..."后面{}中间标示的是属性的value(值)。通过后面style={} 属性推测,里面{}中间的value因该是存在属性变量或者对象。
{{width: 193, height: 110}} 里面有点类似于一个json数据,也可以理解为一个表达式。 因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

我们自定义组件也可以使用props(property),通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴,只需在render函数中引用this.props,然后按需处理。 举个栗子:  import React,{Component }from ‘react’;  import {AppRegister,Text,View} form ‘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‘/>   );  } }

AppRegistry.registerComponent(‘LotsOfGreetings‘,()=>
LotsOfGreetings);

2. State:   如果需要在constuctor中国年初始化state,需要在修改时调用setState方法。   示例,闪烁文字效果。   文字内容可以在组件创建时指定,所以对应文字的隐藏和闪烁状态是随着时间变化的。  import React,{ component } from ‘react‘;  import {AppRegistry,Text,View} from ‘react-native‘;
class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : ‘ ‘;
    return (
      <Text>{display}</Text>
    );
  }
}
class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text=‘I love to blink‘ />
        <Blink text=‘Yes blinking is so great‘ />
        <Blink text=‘Why did they ever take this out of HTML‘ />
        <Blink text=‘Look at me look at me look at me‘ />
      </View>
    );
  }
}

AppRegistry.registerComponent(‘BlinkApp‘, () => BlinkApp);
3. 样式
后设置的样式会比先设置的样式优先级高import React, { Component } from ‘react‘;
import { AppRegistry, StyleSheet, Text, View } from ‘react-native‘;

class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: ‘blue‘,
    fontWeight: ‘bold‘,
    fontSize: 30,
  },
  red: {
    color: ‘red‘,
  },
});

AppRegistry.registerComponent(‘LotsOfStyles‘, () => LotsOfStyles);

常见的做法是按顺序声明和使用style属性,以借鉴CSS中的“层叠”做法(即后声明的属性会覆盖先声明的同名属性)。

4. 宽度与高度

可以将其定义为style属性,在{}中写成json格式字符串。 可以通过点语法,定义内连样式。

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

class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: ‘powderblue‘}} />
        <View style={{width: 100, height: 100, backgroundColor: ‘skyblue‘}} />
        <View style={{width: 150, height: 150, backgroundColor: ‘steelblue‘}} />
      </View>
    );
  }
};
// 注册应用(registerComponent)后才能正确渲染
// 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册
AppRegistry.registerComponent(‘AwesomeProject‘, () => FixedDimensionsBasics);

5. 弹性样式    flex=1,组件占据整个剩余空间,如果有多个组件,name这些组件平分剩余空间。
import React, { Component } from ‘react‘;
import { AppRegistry, View } from ‘react-native‘;

class FlexDimensionsBasics extends Component {
  render() {
    return (
      // 试试去掉父View中的`flex: 1`。
      // 则父View不再具有尺寸,因此子组件也无法再撑开。
      // 然后再用`height: 300`来代替父View的`flex: 1`试试看?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: ‘powderblue‘}} />
        <View style={{flex: 2, backgroundColor: ‘skyblue‘}} />
        <View style={{flex: 3, backgroundColor: ‘steelblue‘}} />
      </View>
    );
  }
};

AppRegistry.registerComponent(‘AwesomeProject‘, () => FlexDimensionsBasics);

6. 使用Flexbox进行布局:

Flexbox可以在不同屏幕尺寸上提供一致的布局结构。

一般来说,使用flexDirectionalignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

React Native中的Flexbox的工作原理和web上的CSS基本一致,当然也存在少许差异。首先是默认值不同:flexDirection的默认值是column而不是rowalignItems的默认值是stretch而不是flex-start,以及flex只能指定一个数字值。

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列呢?默认值是竖直轴(column)方向。  <View style={{flex: 1, flexDirection: ‘row‘}}>

justifyContent可以决定其子元素沿着主轴的排列方式, flex-start,center,flex-end,space-around以及space-bettween.

在组件的style中指定alignItems可以决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-startcenterflex-end以及stretch
时间: 2024-10-12 16:00:19

2.ReactNative Properties|States|Styles 笔记的相关文章

java.util.Properties类 学习笔记

学习目标: 1.认识properties文件,理解其含义,会正确创建properties文件. 2.会使用java.util.Properties类来操作properties文件. 3.掌握相对路径,能正确书写一个properties文件的相对路径. 一.认识properties文件 1.properties文件是一个文本文件 2.properties文件的语法有两种,一种是注释,一种属性配置. 注    释:前面加上#号 属性配置:以“键=值”的方式书写一个属性的配置信息. 3.propert

基于Redux的ReactNative项目开发总结(一)

写在前面 上周把基于Redux的单页应用开发完 紧接着就开始了ReactNative的开发.真的快得不可思议,只花了一周时间,我们两个人就分工把APP也开发完了,并且同时兼容IOS操作系统和Android操作系统.内部测试了一轮,流畅性和用户体验方面也都相当给力! 接下去几篇依次介绍项目开发中领悟的技巧和遇到的坑. 项目架构 和React开发的单页应用不同,ReactNative开发不需要依赖webpack,facebook已经提供的一套基于NodeJS的转换和运行工具,这里不多做介绍.项目的架

Styles and Themens(1)详述

Styles and Themes IN THIS DOCUMENT Defining Styles Inheritance Style Properties Applying Styles and Themes to the UI Apply a style to a View Apply a theme to an Activity or application Select a theme based on platform version Using Platform Styles an

【转】Android开发笔记(序)写在前面的目录

原文:http://blog.csdn.net/aqi00/article/details/50012511 知识点分类 一方面写写自己走过的弯路掉进去的坑,避免以后再犯:另一方面希望通过分享自己的经验教训,与网友互相切磋,从而去芜存菁进一步提升自己的水平.因此博主就想,入门的东西咱就不写了,人不能老停留在入门上:其次是想拾缺补漏,写写虽然小众却又用得着的东西:另外就是想以实用为主,不求大而全,但求小而精:还有就是有的知识点是java的,只是Android开发也会经常遇上,所以蛮记下来.个人的经

21/CLASS - C Language Style for Scalability——ZeroMQ官网建议的C语言命令规范

http://rfc.zeromq.org/spec:21 Table of Contents License Change Process Language Goals Quality Aspirations Common Problems General Style Definitions Language Naming Project Style Project Focus Project Name General Layout Dependencies Project Header Fi

geoserver 数据图层输出格式

1.WMS服务请求参数 一般WMS的请求地址如下: http://localhost:8080/geoserver/topp/wms?service=WMS&versi on=1.1.0&request=GetMap&layers=topp:states&styles=&bbox=- 124.73142200000001,24.955967,-66.969849,49.371735&width=780&height=330 &srs=EPSG

用VC制作应用程序启动画面

摘 要:本文提供了四种启动画面制作方法. 使用启动画面一是可以减少等待程序加载过程中的枯燥感(尤其是一些大型程序):二是 可以用来显示软件名称和版权等提示信息.怎样使用VC++制作应用程序的启动画面呢?本文提供四种方法.前三种适用于基于文档的应用程序,第四种适用于基于对话框的应用程 序. 1.利用组件库中的Splash Screen组件实现 (1)用Photoshop等制作启动画面图像,保存为bmp格式. (2)用Appwizard建一个基于单文档的工程Splash. (3)在资源中插入位图资源

从iReport至Jaspersoft Studio

这篇文章同步到http://www.waylau.com/from-ireport-to-jaspersoft-studio/ 从5.5版本号開始,Jaspersoft Studio将代替iReport 成为JasperReports官方设计器.iReport 维护截止日期到2015年底.意味着不会再有新的功能添加进iReport,但会做一些关键bug的修复.更新. 所幸的是基于eclipse的Jaspersoft Studio相同开源.免费! Yeah! Jaspersoft Studio是一

从iReport到Jaspersoft Studio

本文同步至http://www.waylau.com/from-ireport-to-jaspersoft-studio/ 从5.5版本开始,Jaspersoft Studio将取代iReport 成为JasperReports官方设计器.iReport 维护截止日期到2015年底,意味着不会再有新的功能增加进iReport,但会做一些关键bug的修复.更新.所幸的是基于eclipse的Jaspersoft Studio同样开源.免费!Yeah! Jaspersoft Studio是一个专为Ja