欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

React-Native学习: 样式与单位

程序员文章站 2022-06-15 09:36:49
React-Native学习:01 函数式组件和类组件函数式组件:首先我们先导入要用到的组件import React from 'react';import {Text, View} from 'react-native';再用const常量定义函数const HelloWorldApp = () => {函数体}...

React-Native学习

注意:RN没有严格区分单标签和双标签,所以标签都可以用双标签
什么是react-native?
答:使用JavaS和React编写原生移动应用。

函数式组件和类组件样式

函数式组件示例:

import React from 'react';
import { Text } from 'react-native';

const Cat = () => {
  return (
    <Text>Hello, I am your cat!</Text>
  );
}

export default Cat;

类组件示例:

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

class Cat extends Component {
  render() {
    return (
      <Text>Hello, I am your cat!</Text>
    );
  }
}

export default Cat;

JSX

React中编写组件的代码格式,全称是 JavaScript xml

import React from 'react';
import {View, Text} from 'react-native';
/* 这就是JSX的格式 */
const Index = () => 
  <View>
    <Text>JSX</Text>
  </View>

export default Index;

RN的样式

先认识常用的组件
React-Native学习: 样式与单位

1.flex布局

/* 
1.rn中默认容器的布局方式都是flex
2.方向是flex-direction:column; (垂直排列)
*/
const Index = () => 
/* flex 属性决定元素在主轴上如何 填满 可用区域。
整个区域会根据每个元素设置的 flex 属性值被分割成多个部分。  */
/* flexDirection表示排列的方式 默认column 也可以设置为 row */
  <View style={{backgroundColor:"aqua",flexDirection:"row"}}>
    <Text> JSX1 Hello World</Text> 
    <Text> JSX2 Hello World</Text> 
  </View>

React-Native学习: 样式与单位

2.单位

import React from 'react';
/* Dimensions 用于获取设备的宽高 */
import {View, Text, Dimensions} from 'react-native';
// 设置的宽
const screenWidth = Math.round(Dimensions.get('window').width);
// 设备的高
const screenHeight = Math.round(Dimensions.get('window').height);
/* 
1.在rn中样式是没有继承的
单位
   1.不用加px 一加就报错
   2.可以加百分比
*/
const Index = () => (
  <View style={{backgroundColor: 'aqua', height: '25%', width: '100%'}}>
    <Text style={{color: 'orange', fontSize: 25, textAlign: 'center'}}>
      {' '}
      JSX1 Hello World
    </Text>
    <Text style={{color: 'yellow', fontSize: 25, textAlign: 'center'}}>
      {' '}
      JSX2 Hello World
    </Text>
    <View>
      <Text
        style={{
          width: screenWidth / 2,
          height: screenHeight / 2,
          textAlign: 'center',
          backgroundColor: 'orange',
          marginTop:132
        }}>
        屏幕的宽高的一半
      </Text>
    </View>
  </View>
);
export default Index;

React-Native学习: 样式与单位

变换

import React from 'react';
import {View, Text} from 'react-native';
/* 
1.rn中默认容器的布局方式都是flex
2.方向是flex-direction:column; (垂直排列)
3.在rn中样式是没有继承的
4.单位
   1.不用加px 一加就报错
   2.可以加百分比
*/
const Index = () => (
  <View>
    <Text
      style={{
        backgroundColor: 'aqua',
        textAlign: 'center',
        color: 'yellow',
        // translateY向y轴移动300单位,scale缩放2倍
        transform: [{translateY: 300}, {scale: 2}],
      }}>
      JSX
    </Text>
  </View>
);

export default Index;

React-Native学习: 样式与单位

标签

1. View

  • 相当于Web端的div
  • 不支持设置字体大小和颜色(因为rn每天继承,设置了也没有实际的作用)
  • 不能直接放文本
  • 不支持直接绑定点击事件(一般用TouchableOpacity代替)

2.Text

  • 文本标签可以设置字体大小和颜色

  • 支持绑定点击事件

    TouchableOpacity
    可以绑定点击事件的块级标签

    • 相当于块级容器
    • 支持绑定点击事件onPress
    • 可以设置点击时的透明度
import React from 'react';
/* Dimensions 用于获取设备的宽高 */
import {TouchableOpacity, Text} from 'react-native';
const handerPress = () => {
  alert('触屏');
};
const Index = () => (
  // activeOpacity 控制点击时的透明度 默认0
  <TouchableOpacity activeOpacity={0.2} onPress={handerPress}>
    <Text style={{textAlign: 'center', fontSize: 25, color: 'orange'}} c>
      TouchableOpacity
    </Text>
  </TouchableOpacity>
);

export default Index;

React-Native学习: 样式与单位
3. Image

  • 渲染本地图片时(可以不用添加宽高)
<Image source={require('../MyApp/Images/1.png')} />
  • 渲染网络图片(必须添加宽高)
    <Image
      source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png'}}
      style={{width: 200, height: 200}}
    />
  • 在 Android 上支持 GIF 和 WebP 格式图片
    默认情况下 Android 是不支持 GIF 和 WebP 格式的。你需要在android/app/build.gradle文件中根 据需要手动添加以下模块:
// 如果你需要支持GIF动图
implementation 'com.facebook.fresco:animated-gif:2.0.0'

// 如果你需要支持WebP格式,包括WebP动图
implementation 'com.facebook.fresco:animated-webp:2.1.0'
implementation 'com.facebook.fresco:webpsupport:2.0.0'

// 如果只需要支持WebP格式而不需要动图
implementation 'com.facebook.fresco:webpsupport:2.0.0'

React-Native学习: 样式与单位
注意修改完android文件夹里面的代码都需要重启项目

<View>
  <Image source={require('./Images/1.png')} style={{width:200,height:200}}></Image>
  <Image source={require('./Images/1.jpg')} style={{width:300,height:300}}></Image>
  <Image source={require('./Images/1.gif')} style={{width:300,height:300}}></Image>
</View>

React-Native学习: 样式与单位

4.ImageBackground
一个可以使用图片当作背景的容器,相当于以前的 div+背景图片(必须加宽高)

    <ImageBackground
      source={require('../MyApp/Images/1.png')}
      style={{width: '100%', height: '100%'}}>
      <Text>Inside</Text>
    </ImageBackground>

React-Native学习: 样式与单位
5.TextInput(输入框组件)
TextInput是一个允许用户输入文本的 基础组件 。它有一个名为 onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用。另外还有一个名为 onSubmitEditing的属性,会在文本被提交后(用户按下软键盘上的提交键)调用。

const changeText=(text)=>{
  alert(text);
}
const Index = () => {
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 80,fontSize:40}}
        placeholder="Type here to translate!"
        onChangeText={changeText}
      />
    </View>
  );
}

React-Native学习: 样式与单位

本文地址:https://blog.csdn.net/I_r_o_n_M_a_n/article/details/112723765