2.ReactNative Properties|States|Styles 笔记

Posted 2020-08-09 阿甘左

原文地址: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可以在不同屏幕尺寸上提供一致的布局结构。

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

 React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，alignItems的默认值是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-start、center、flex-end以及stretch。