組件的屬性（Props）

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

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
     // 傳入一個(gè)名為source的prop來(lái)指定要顯示的圖片的地址，使用名為style的prop來(lái)控制其尺寸。
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

source={pic} 括號(hào)的意思是括號(hào)內(nèi)部為一個(gè)js變量或表達(dá)式

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

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

// 使用自定義的組件 Greeting
// export 
export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

image.png

組件的狀態(tài)（state）

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

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };

    // 每1000毫秒對(duì)showText狀態(tài)做一次取反操作
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 1000);
  }

  render() {
    // 根據(jù)當(dāng)前showText的值決定是否顯示text內(nèi)容
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

export default 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>
    );
  }
}

組件的樣式（組件的屬性）

1、組件樣式的基本使用

// 組件的樣式
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default 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>
    );
  }
}

// 自定義一個(gè)樣式
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

// 注冊(cè)樣式???
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);

2、樣式中的寬高

• 指定寬高
  React Native中的尺寸都是無(wú)單位的，表示的是與設(shè)備像素密度無(wú)關(guān)的邏輯像素點(diǎn)。

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>
    );
  }
};
// 注冊(cè)應(yīng)用(registerComponent)后才能正確渲染
// 注意：只把應(yīng)用作為一個(gè)整體注冊(cè)一次，而不是每個(gè)組件/模塊都注冊(cè)
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

• 彈性寬高（比例寬高）
  一般而言我們會(huì)使用flex:1來(lái)指定某個(gè)組件擴(kuò)張以撐滿所有剩余的空間。如果有多個(gè)并列的子組件使用了flex:1，則這些子組件會(huì)平分父容器中剩余的空間。

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

class FlexDimensionsBasics extends Component {
  render() {
    return (
      // 試試去掉父View中的`flex: 1`。
      // 則父View不再具有尺寸，因此子組件也無(wú)法再撐開(kāi)。
      // 然后再用`height: 300`來(lái)代替父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);

自定義組件總結(jié)

構(gòu)造方法
屬性-樣式 // 組件要顯示什么，長(zhǎng)什么樣
狀態(tài)      // 改變組件的顯示狀態(tài)（比如請(qǐng)求新的數(shù)據(jù)后刷新控件）
render方法 // 返回要渲染出來(lái)的組件

常見(jiàn)調(diào)試錯(cuò)誤

錯(cuò)誤一：

image.png

錯(cuò)誤二：

image.png