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

#屏幕宽度和高度

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. 
   
2. View
   
3. Text
   
4. TouchableOpacity
   
5. Image
   
6. ImageBackground
   
7. TextInput
   
8. 其他 =>
   
   1. 
      
   2. button
      
   3. FlatList
      
   4. ScrollView
      
   5. StatusBar
      
   6. TextInput
      
   
   
   

View

1. 
   
2. 相当于以前web中的div
   
3. 不支持设置字体大小， 字体颜色等
   
4. 不能直接放文本内容
   
5. 不支持直接绑定点击事件（一般使用TouchableOpactiy 来代替）
   

Text

1. 
   
2. 文本标签，可以设置字体颜色、大小等
   
3. 支持绑定点击事件
   

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

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

1. 
   
2. 相当于块级的容器
   
3. 支持绑定点击事件 onPress
   
4. 可以设置点击时的透明度
   

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. 插值表达式
   
4. 状态state
   
5. 属性props
   
6. 调试
   
7. 事件
   
8. 生命周期
   

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. 
   
2. 没有state（通过hooks可以有）
   
3. 没有生命周期（通过hooks可以有）
   
4. 适合简单的场景
   

类组件

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

属性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

人懒，不想配图，都是自己的博客内容（干货），望能帮到大家