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 (
      
        
          
            
              
                测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据
              
            
          
          
            获取屏幕的宽度：{width}
            获取屏幕的高度：{height}
            获取屏幕的像素比：{scale}
            
            
              点击按钮
            
            图片的第一次引用
            
            图片的第二次引用
            
            
              图片的第三次引用(网络路径的图片), 这种方式引入还要给图片设置宽高
            
            
            
              图片的第四次引用,在android的文件夹下
              android -> app -> src -> main -> res -> drawable,这样引入的是app内部资源
            
            
          
        
      
    );
  }
  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
  }
});