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的样式
先认识常用的组件
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
上一篇: 打开activity,报错java.lang.SecurityException: Permission Denial: starting Intent { act=android.intent.ac
下一篇: TCP/IP协议ip头解析
推荐阅读
-
黑马Android76期学习笔记01基础--day07--广播,有、无序广播、特殊广播接受者、样式和主题,this与context的区别、普通对话框,进度条对话框、帧动画
-
CSS3学习笔记——背景与边框相关样式
-
React-Native学习: 样式与单位
-
canvas游戏开发学习之六:运用样式与颜色(二)
-
从零开始学习jQuery (四) jQuery中操作元素的属性与样式_jquery
-
Vue.js基础学习之class与样式绑定
-
从零开始学习jQuery (四) jQuery中操作元素的属性与样式_jquery
-
canvas游戏开发学习之六:运用样式与颜色(二)
-
canvas游戏开发学习之五:运用样式与颜色(一)
-
CSS3与页面布局学习笔记(一)概要、选择器、特殊性与刻度单位