一. HelloWord

1.初始化工程

react-native init Hello
cd Hello
react-native run-ios

這個有一點要注意，博主是在終端直接操作的，後來把檔案移動到專門的React Native資料夾裡，移動之後，之前建立的專案都執行不起來了，會出以下問題

 We couldn't boot your defined simulator due to an already booted simulator. We are limited to one simulator launched at a time.

2.HelloWord

//引入React, 引入react中Component這一模組
import React, { Component } from 'react';
import {
    AppRegistry, //註冊
    StyleSheet,  //樣式
    Text,        //文字
    View         //檢視
} from 'react-native';

//這是ES6的一種寫法 建立了一個Hello的類繼承Component
class Hello extends Component {
    // 初始化方法 --->相當於OC中的ViewDidLoad --->返回具體的元件內容
    //寫結構和內容
    render() {
        //返回
        return (
            <Text>Hello world!</Text>
        );
    }
}
//export default關鍵字。它的意思是匯出(export)當前元件，以允許其他元件引入(import)和使用當前元件
export default class FetchAPI extends Component {
}
/*  注意:
 1. 這裡用引號括起來的'Hello'必須和你init建立的專案名一致
 2. AppRegistry模組則是用來告知React Native哪一個元件被註冊為整個應用的根容器。一般在整個應用裡AppRegistry.registerComponent這個方法只會呼叫一次。
 */
AppRegistry.registerComponent('Hello', () => Hello);
 

ReactNative中所有的變數都用{}來寫

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

class Hello extends Component {
    render() {
        let pic = {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        };
        return (
            <Image source={pic} style={{width: 200, height: 120}} />
        );
    }
}
AppRegistry.registerComponent('Hello', () => Hello);

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


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

class Hello extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
            //在Greeting元件中將name作為一個屬性來定製，這樣可以複用這一元件來製作各種不同的“問候語”。
              <Greeting name='歡迎來到' />
              <Greeting name='React native' />
              <Greeting name='學習中' />
            </View>
        );
    }
}
AppRegistry.registerComponent('Hello', () => Hello);

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

class HelloApp 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 Hello extends Component {
    render() {
        return (
            <View>
              <HelloApp text='I love to blink' />
              <HelloApp text='Yes blinking is so great' />
              <HelloApp text='Why did they ever take this out of HTML' />
              <HelloApp text='Look at me look at me look at me' />
            </View>
        );
    }
}
AppRegistry.registerComponent('Hello', () => Hello);

實際開發中元件的樣式會越來越複雜，我們建議使用StyleSheet.create來集中定義元件的樣式。比如像下面這樣：

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

export default class StyleAndProps extends Component {
  render() {
    return (
      <View style={styles.container}>
          {/*<Text style={[styles.title,{fontStyle:'italic' }]}>*/}
          {/*<Text style={styles.title}>
          Welcome to React <Text style={{fontWeight:'600'}}>Native!</Text>
        </Text>*/}
       <HeaderText>
         Welcome to React
       </HeaderText>

      </View>
    );
  }
}
//在主檔案上建立一個顯示文字的元件(自定義元件)
class HeaderText extends Component {
    render() {
        return (
            <Text style={styles.title}>
                {/*在這個元件中顯示的文字就是: this.props.children */}
                {this.props.children}
              </Text>

        );
    }
}
const styles = StyleSheet.create({
  //常用樣式
  container: {
    flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginBottom:20,

    margin :30,
    borderColor:'#6435c9',
    borderWidth:1,
    shadowColor:'#6435c9',
    shadowOpacity:0.6, //陰影不透明度
    shadowRadius:2, //陰影半徑
    shadowOffset: {
        height:1,
        width:0
      },
    marginLeft: 20,
    marginRight: 20,
   // marginTop:40
      paddingTop:130
  },
// 文字樣式
    title:{
    fontSize:20,
    color:'#6435c9'   ,
    textAlign:'center', //文字對齊方式
    fontStyle:'italic' ,//字型樣式
    letterSpacing:2 ,//字間距
    lineHeight:33,   //行間距
    fontFamily:'Helvetica Neue',
    fontWeight:'300', //文字的粗細,粗體,細體或者300等
    textDecorationLine:'underline',//設定下劃線或者刪除線(line-through)
    textDecorationStyle:'dashed' //線的樣式:實線(solid),雙實線(double),點線(dotted),虛線(dashed)
    }
});

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