注册

[react-native]JSX和RN样式以及和web的不同之处

全屏状态栏


import { View, Text, Image, StatusBar } from 'react-native'
<StatusBar backgroundColor="transparent" translucent={ true } />


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开发的不同之处)


image.png


#屏幕宽度和高度
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={{ uri: '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代码的


组件: 函数组件, 类组件


函数组件



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

类组件



  1. 适合复杂的场景
  2. 有state
  3. 有生命周期

属性props (父子组件的传递)和插槽slot


import React from 'react'
import { View, Text } from 'react-native'

const App = () => (
<View>
<Text>==========</Text>
<Sub color="red">
<View><Text>1234</Text></View>
</Sub>
<Text>==========</Text>
</View>
)

// 子组件 props
const Sub = (props) =>
(<View><Text style={{ color: props.color }}>{ props.children }</Text></View>)

// 插槽类似于 vue中的slot
export default App



人懒,不想配图,都是自己的博客内容(干货),望能帮到大家




链接:https://juejin.cn/post/6977283223499833358

0 个评论

要回复文章请先登录注册