基本組件的使用介紹
- 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="https://www.cnblogs.com/treeskyer/p/哈哈，今天總有人在后面說話" 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 庫提供的 固有組件；不能使用 網頁中的 任何 元素；
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/17860.html
標籤：其他
上一篇：jQuery---城市選擇案例