（友情提示：RN學習，從最基礎的開始，大家不要嫌棄太基礎，會的同學請自行略過，希望不要耽誤已經會的同學的寶貴時間）

React Native看起來很像React，其實React Native就是根據React發展而來的，只不過其基礎元件是原生元件而非web元件。所以在體驗互動上更加接近原生操作，所以體驗比web效果好很多。加上可以跨平臺，體驗又接近原生，所以自15年以來比較火。

我們要想理解React Native應用的基本結構，我們首先需要先了解一些基本的React的概念，比如JSX語法、元件、state狀態以及props屬性。所以這篇我們重點講講Props，state和style樣式。今天講解的內容，都是根據React Native官方文件上的內容來的。 官方文件地址： Props ：

props

props(屬性) 概念

大多陣列件在建立的時候就可以用各種引數來進行定製。用於定製的這些引數就稱為props（屬性）。所謂props，就是屬性傳遞，而且是單向傳遞的。屬性多的時候，可以傳遞一個物件，這是es6中的語法。

例子1:

官網給的第一個例子是用現成的一個Image基礎元件來解釋這個概念的，例子如下：

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);
 

當我們建立一個image圖片的時候，我們可以使用名為source的props屬性去控制這個image顯示什麼圖片。

注意{pic}外圍有一層括號，我們需要用括號來把pic這個變數嵌入到JSX語句中。我們可以把任意合法的JavaScript表示式通過括號嵌入到JSX語句中。

為了更好的說明props的用法和概念，我把上面的例子又修改了一下，我的這個例子只是為了更好的說明props屬性的用法，不建議大家這麼使用，畢竟image是現成的基礎元件。

修改後的例子：

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

class Bananas extends Component {
  render() {
    return (
      <Image source={this.props.image} style={{width: 120, height: 80}}/>
    );
  }
}

class FirstProject extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <View style={{padding: 10}}>
        <Bananas image ={pic}/>
      </View>
    );
  }
}
AppRegistry.registerComponent('FirstProject', () => FirstProject);

這裡我自定義了一個名為Bananas的元件，定義了一個名為image的屬性props，注意image是小些的， 大些的Image是官方圖片基礎元件。在自定義的Bananas元件中的Image元件中，引用了我們定義的image的屬性props。這樣一對比，可能大家就更能清楚的理解了props的用法了。說白了就是定製引數，然後傳值。

例子2

官方給的第二個例子，就非常清楚了，是這樣的。

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);

意思就是：自定義了一個名為Greeting的元件，然後，屬性名為name，傳不同的name值，在Text顯示不同的名字。

state

React靠一個state來維護狀態，當state發生變化則更新DOM。控制一個元件，一般有兩種資料型別，一種是props，一種是state。props是在父元件中設定，一旦指定，它的生命週期是不可以改變的。對於元件中資料的變化，我們是通過state來控制的。

一般情況下，我們初始化state狀態，是在constructor建構函式中，然後如果需要改變時，我們可以呼叫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);

首先，它是自定義了一個Blink的元件，在建構函式中初始化了state，然後寫了一個定時器，每個1秒改變一次狀態，然後setState,然後在渲染render()方法中，判斷狀態的變化，如果是true，顯示文字，false顯示空。這樣一閃一閃的效果就出來了。

然後我們在BlinkApp中使用Blink元件，並傳入我們需要的文字內容即可。

效果圖如下：

其實在實際開發中，我們不需要設定定時器來改變狀態，一般情況下，我們都是在獲取到伺服器的資料時或者使用者輸入時，更新狀態去顯示最新的資料。這是我們就是通過setState來做到的。

style

在React Native中我們不需要使用什麼特殊的語言或者語法去定義樣式，我們還是使用JavaScript來寫樣式。所有的核心元件都接受名為style的屬性。唯一的不同就是屬性樣式的命名使用了駝峰命名法，例如將background-color改為backgroundColor。

例子：

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

class FirstProject 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>
        <Text style={{color:'red' , fontSize:30}}>
            非著名
      <Text style={{color:'blue'}}>
          程式設計師
      </Text>
        </Text>
      </View>
    );
  }
}

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

AppRegistry.registerComponent('FirstProject', () => FirstProject);

在js中，最簡單的樣式用法是style屬性可以是一個普通的JavaScript物件。但是這裡我們可以傳入一個數組的樣式，在陣列中位置後面的樣式覆蓋前面的樣式，後面的優先順序比較高。所以我們可以這樣使用去繼承樣式。

隨著元件的複雜性，我們建議使用StyleSheet.create來集中定義元件的樣式，就像上面的用法一樣，當然也支援單獨的使用，就像上面例子中的最後一個的用法，上面文字的展示中，第三個，第四個使用了陣列樣式的方法，後面的樣式覆蓋了前面的樣式，最後一個使用了內嵌的方式，做成了前半部分顯示紅色，後半部分顯示藍色的效果。

效果圖如下：

相關推薦：

環境配置:React Native 開發環境配置 For Android（可點選）

環境配置：React Native智慧開發工具，可程式碼提醒的IDE—VS Code（可點選）