react-native簡單使用

基本組件的使用介紹

• View：
• Text：
• TextInput：
• Image：
• Button：
• ActivityIndicator：
• ScrollView：這是一個列表滾動的組件
• ListView：也是一個列表滾動的組件，可是，這個組件已通過時了，官方推薦使用 FlatList 來代替它

index.js

// 從 Reactnative 的包中，導入 AppRegistry 組件，它的做用，就是註冊項目首頁的
import { AppRegistry } from 'react-native';

import App from './App';

// 導入本身的組件頁面
import MyHomePage from './MyHomePage.js'

// 當使用 AppRegistry 註冊項目的時候，方法中的第一個參數，不要改，不然項目就廢了
// 第二個參數，表示要把哪一個頁面註冊爲項目的首頁
AppRegistry.registerComponent('rn_douban', () => App);

MyHomePage.js

// 在 RN 中只能使用 .js 做爲 組件的後綴名，不能使用 .jsx
import React, { Component } from 'react'

// View 組件負責佈局，就比如 網頁中的 div 元素
import { View, Text } from 'react-native'

export default class MyHomePage extends Component {
  // constructor 通常也推薦都寫出來
  constructor(props) {
    super(props)
    this.state = {}
  }

  // 必須有 render 函數
  render() {
    // 1, 在 RN 中，不能使用 網頁中的 全部標籤，像 div ， p  ,  img不能用
    // 2. 若是想要實現佈局， RN 提供了  View 的組件，來實現佈局；RN 提供了一系列基礎的組件，來方便程序員的開發，若是想要使用這些組件，只需  按需 把 組件 從 'react-native' 中導入便可
    return <View>
      {/* 在 RN 中，全部的文本，必須使用 RN 提供的 Text 組件進行包裹；不然會報錯 */}
      <Text>123456~~~~~</Text>
    </View>
  }
}

app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
// 導入 React 基礎包，這個包，做用是建立 組件
import React, { Component } from 'react';

// 從 react-native 中導入系統開發須要的包
import {
  Platform, // 用來提供平臺檢測功能的
  StyleSheet, // 樣式相關的組件，專門用來建立樣式的
  Text, // 文本節點，全部文本必須放到這個裏面
  View, // 用來佈局的，至關於 div
  TextInput, // 文本框組件
  Image, // 圖片組件
  Button, // 按鈕組件
  ActivityIndicator, // 加載中的 loading 效果小圓圈
  ScrollView, // 滾動組件（默認，若是一個RN的頁面很是長，超出了屏幕高度，這時候，不會像網頁中那樣自動提供滾動條，若是須要讓頁面實現滾動的話，須要使用 ScrollView 把頁面包裹起來）
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

// 這是 TS（TypeScript） 的語法
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/* 若是使用 animating 隱藏 loading效果，只是讓他不可見了，可是區域還在 */}
        <ScrollView style={{width: '100%'}}>
          <ActivityIndicator color="red" size="large" animating={true}></ActivityIndicator>
          <Text style={styles.welcome}>
            Welcome to React Native!
        </Text>
          <Text style={styles.instructions}>
            To get started, edit App.js
        </Text>
          <Text style={styles.instructions}>
            {instructions}
          </Text>
          <TextInput style={styles.inputStyle} defaultValue="哈哈，今天總有人在後面說話" secureTextEntry={true}></TextInput>

          {/* 引入本地的圖片資源 */}
          <Image source={require('./images/1.jpg')}></Image>
          <Image source={require('./images/1.jpg')}></Image>
          <Image source={require('./images/1.jpg')}></Image>
          <Image source={require('./images/1.jpg')}></Image>

          {/* 引入網絡中的圖片資源，除了要指定 一個 uri 資源路徑以外，還須要 爲這張網絡圖片，指定寬和高，不然顯示不出來； */}
          <Image source={{ uri: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=358796479,4085336161&fm=200&gp=0.jpg' }} style={{ width: 200, height: 160 }}></Image>

          {/* 在 Button 按鈕中， title 屬性 和 onPress 屬性是必須的 */}
          {/* onPress 表示點擊按鈕，要觸發的操做 */}
          <Button title="這是一個按鈕" onPress={() => { console.warn('123') }}></Button>

        </ScrollView>
      </View>
    );
  }
}

// 使用 StyleSheet.create 建立樣式表對象，能夠爲 create 傳遞 一個配置對象，這個對象，就是要建立的樣式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    // 在RN中，主軸默認是縱向的
    justifyContent: 'flex-start', // 一些 文本類型的 樣式值，須要使用 引號包裹起來
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20, // 長度單位的 px 值能夠省略，由於 RN 默認就是以 px 做爲單位的
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  inputStyle: {
    width: '100%'
  }
});



// 總結：若是要定義一個基本的 RN 頁面：須要的步驟：
// 1. 導入 react 包，來建立組件
// 2. 導入 react-native 包，來提供基礎的開發組件
// 3. 從 react-naitve 中，能夠導入 StyleSheet 的組件，用它 的 create 方法，能夠建立樣式對象
// 4. 使用 react 基礎的語法，建立出來的組件，就是一個 合法的 RN 組件頁面；若是想要在頁面中，放置一些合法的 頁面元素，只能使用 RN 庫提供的 固有組件；不能使用 網頁中的 任何 元素；