JSX和RN样式以及和web的不同之处

简介: JSX和RN样式以及和web的不同之处

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



import React from 'react'
import { View, Text } from 'react-native'
const App = () => <View>
  <Text>JSX Hello World</Text>
</View>
export default App
复制代码


RN样式(主要讲解和web开发的不同之处)



flex布局:

  • 在rn中默认容器, 布局方式,默认都是flex
  • 方向flex-direction: column

样式继承:

  • 背景颜色
  • 字体颜色
  • 字体大小等没有继承

单位:

  • 不能加px单位
  • 不能加vw、vh等单位
  • 可以加百分比单位


#屏幕宽度和高度
import { Dimensions } from 'react-native'
const screenWidth = Math.round(Dimensions.set('window').width)
const screenHeight = Math.round(Dimensions.get('window').height)
#变换
<Text style={{ transform: [{translateY: 300}, {scale: 2}] }}>变换</Text>
复制代码


标签



  1. View
  2. Text
  3. TouchableOpacity
  4. Image
  5. ImageBackground
  6. TextInput
  7. 其他 => 1.button 2. FlatList 3.ScrollView 4.StatusBar 5.TextInput


View



1.相当于以前web中的div

2.不支持设置字体大小, 字体颜色等

3.不能直接放文本内容

4.不支持直接绑定点击事件(一般使用TouchableOpactiy 来代替)


Text



1.文本标签,可以设置字体颜色、大小等

2.支持绑定点击事件


TouchableOpacity (onpress => 按下事件 onclick=> 点击事件)



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

1.相当于块级的容器

2.支持绑定点击事件 onPress

3.可以设置点击时的透明度


import React from 'react'
import {TouchableOpacity, Text} from 'react-native'
const handlePress = () => {
  alert('111')
}
const App = () => 
  <TouchableOpacity activeOpacity={0} onPress={ handlePress }>
    <Text>点击事件</Text>
  </TouchableOpacity>
export default App
复制代码


Image图片渲染



1.渲染本地图片时


<Image source={ require("../gril.png") } />
复制代码


2.渲染网络图片时, 必须加入宽度和高度


<Image source={{ url: 'https://timgsa.baidu.com/xxx.png }} style={{ width: 200, height: 300 }} />
复制代码


3.在android上支持GIF和WebP格式图片

默认情况下Android是不支持gif和webp格式的, 只需要在 android/app/build.gradle 文件中根据需要手动添加以下模块:


dependencies {
  // 如果你需要支持android4.0(api level 14)之前的版本
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'
  // 如果你需要支持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:websupport:2.0.0'
}
复制代码


ImageBackground



一个可以使用图片当做背景的容器,相当于以前的    div + 背景图片


import React from 'react'
import { Text, ImageBackground } from 'react-native'
const App = () => 
  <ImageBackground source={require('./assets/logo.png')} style={{ width: 200, height: 200 }}>
    <Text>Inside</Text>
  </ImageBackground>
export default App
复制代码


TextInput输入框组件



可以通过 onChangeText 事件来获取输入框的值

语法:

1、组件

2、插值表达式

3、状态state

4、属性props

5、调试

6、事件

7、生命周期


import React from 'react'
import { TextInput } from 'react-native'
const handleChangeText = (text) => {
  alert(text)
}
#onChangeText => 获取输入的值
const App = () => <TextInput onChangeText={ handleChangeText } />
export default App
复制代码


花括号{}里面可以直接添加JS代码的


组件: 函数组件, 类组件



函数组件

  • 没有state(通过hooks可以有)
  • 没有生命周期(通过hooks可以有)
  • 适合简单的场景


类组件

  • 适合复杂的场景
  • 有state
  • 有生命周期
相关文章
|
6月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
71 0
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
57 2
|
2月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
61 11
|
3月前
|
开发者 前端开发 UED
打造企业专属形象:Vaadin主题与样式定制,让你的Web应用脱颖而出!
【8月更文挑战第31天】在Web应用开发中,界面设计至关重要。Vaadin框架提供强大的主题和样式定制功能,助力开发者打造符合品牌形象的独特外观。本文详细介绍了Vaadin主题的概念及创建流程,并演示了如何通过CSS和SCSS定制组件样式,使用主题继承扩展现有主题,以及为特定组件设置专属样式。遵循这些最佳实践,不仅能提升用户体验,还能增强品牌的识别度,让你的应用更加出众。
37 0
|
4月前
|
JavaScript 前端开发
Web Components详解-Shadow DOM样式控制
Web Components详解-Shadow DOM样式控制
138 3
|
6月前
|
前端开发 开发者
【Web 前端】CSS 样式覆盖规则?
【4月更文挑战第22天】【Web 前端】CSS 样式覆盖规则?
Web|如何实现导航栏的默认,预览以及选中时的样式
Web|如何实现导航栏的默认,预览以及选中时的样式
76 0
|
前端开发
【web前端开发】CSS文字和文本样式
本篇文章主要讲解CSS中的文字和文本样式及一些实用技巧.文章最后有思维导图.
|
前端开发 JavaScript
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
174 0
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
|
前端开发
Web前端学习:CSS基础-小终结【布局和文本常用样式、常用属性、外边距和内边距】
Web前端学习:CSS基础-小终结【布局和文本常用样式、常用属性、外边距和内边距】
140 0
Web前端学习:CSS基础-小终结【布局和文本常用样式、常用属性、外边距和内边距】
下一篇
无影云桌面