React Native基礎 - 常用組件

// 自定義組件

// 引入核心模塊
import React, { Component } from 'react'
// 從reactive中導出對應的組件, ScrollView組件的初步認識，父容器需定義好寬高
import { View, Text, StyleSheet, ScrollView, Dimensions , Button, TouchableOpacity, Image} from 'react-native'
const { width, height, scale } = Dimensions.get('window') // 獲取屏幕的屬性
// Dimensions.get('window')獲取的是屏幕可用範圍的寬高（不是絕對寬高）
import imgUrl from '../static/img.png'
class App1 extends Component {
  render() {
    return (
      <View>
        <ScrollView>
          <View style={styles.container}>
            <ScrollView>
              <Text style={styles.txt1}>
                測試數據 測試數據 測試數據 測試數據 測試數據 測試數據 測試數據
              </Text>
            </ScrollView>
          </View>
          <View>
            <Text>獲取屏幕的寬度：{width}</Text>
            <Text>獲取屏幕的高度：{height}</Text>
            <Text>獲取屏幕的像素比：{scale}</Text>
            <Button title="按鈕組件的使用" onPress={this.handlePress}></Button>
            <TouchableOpacity
              style={styles.touchBtn}
              onPress={this.handlePress}
            >
              <Text>點擊按鈕</Text>
            </TouchableOpacity>
            <Text>圖片的第一次引用</Text>
            <Image source={imgUrl} style={styles.img}></Image>
            <Text>圖片的第二次引用</Text>
            <Image
              source={require("../static/img.png")}
              style={styles.img}
            ></Image>
            <Text>
              圖片的第三次引用(網絡路徑的圖片), 這種方式引入還要給圖片設置寬高
            </Text>
            <Image
              style={styles.img}
              source={{
                uri:
                  "https://pics7.baidu.com/feed/cf1b9d16fdfaaf51336d992d4de576e8f21f7aca.jpeg?token=8cbd7ce22b258e19954cf2f5a7777bad&s=FD3F30D48A768CCE5F1FA3830300B08E",
              }}
            ></Image>
            <Text>
              圖片的第四次引用,在android的文件夾下
              android -> app -> src -> main -> res -> drawable,這樣引入的是app內部資源
            </Text>
            <Image source={{ uri: "img" }} style={styles.drawable}></Image>
          </View>
        </ScrollView>
      </View>
    );
  }
  handlePress() {
    alert("點擊事件")
  }
}

export default App1;
// 創建並導出模塊

// 樣式代碼
const styles = StyleSheet.create({
  txt1: {
    color: "red",
  },
  container: {
    width: 100,
    height: 100,
    backgroundColor: "pink",
  },
  img: {
    width: 100,
    height: 100,
    borderRadius: 10,
  },
  touchBtn: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: "yellow",
  },
  drawable: {
    width: 100,
    height: 100
  }
});