React-Native学习: 样式与单位

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的样式

先认识常用的组件

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>

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;

变换

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;

标签

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;

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'

注意修改完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>

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

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

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>
  );
}

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