【无标题】

web前端

---

---

首次使用注意事项

注意 1 默认布局

在RN中默认的容器就是 flex布局 方向都是flex-direction：culumn

注意 2 默认布局方向

在flex布局中 flex：1 这里的,1 指的是但方向为横向的时候就是指宽度 当方向为纵向指高度.我们一般默认都是纵向排列，如果要横向就 flexDirection="row"即可

注意 3 单位

关于RN的单位：不用加px,vw,vh，RN会自动识别，直接写数字，但是可以写百分比，百分比用""包起来
提示：这里写了直接报错

注意 4 内联style

我们写内联样式的时候style={{}}，要用{{}}包起来，样式在写在里面

注意 5 获取屏幕宽高

由于我们不能使用vm ，vh所以我们要获取屏幕的宽高就要使用RN提供的方法

import {Dimensions } from 'react-native'; //Dimensions是尺寸的意思
// 定义两个变量设备宽高
const screenWidth = Math.round(Dimensions.get('window').width)
const screenHeight = Math.round(Dimensions.get('window').height)
//使用
const Index = () =>
  <View style={{
    backgroundColor: "yellow",
    flexDirection: "row",
    width:screenWidth ,
    height:screenHeight 
  }}>
  </View>

注意 6 复杂样式 变换

 style={{transform:[{translateY:300},{scale:2}]}}

注意 7

View这一个标签类似于div但是根据上面的文字只能写在Text中，所以View不能写文本类的标签，还有不能设置点击事件，点击事件可以使用标签TouchableOpacity在RN中的点击事件叫做onpress

import { TouchableOpacity} from 'react-native';
const Index=()=>
<TouchableOpacity activeOpacity={0.7} onPress={myClick}>
  <Text>按压我</Text>
</TouchableOpacity>
//这时我们可以设置点击后的透明度：activeOpacity={0.7}
//还有我们可以加一个点击事件 onpress={myClick}

注意 8 Image

图片根据是网络图片还是本地图片，本地图片的写法如下

import {Image } from 'react-native';
 <Image source={require('图片地址')}/>

图片根据是网络图片还是本地图片，网络图片的写法如下

import {Image } from 'react-native';
 <Image source={url："地址"}/> //注意网络图片一般加宽高，不是显示不出来

如果引入的是gif的话，有一点复杂，默认情况下 Android 是不支持 GIF 格式的。你需要在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.5.0'

  // 如果你需要支持WebP格式，包括WebP动图
  implementation 'com.facebook.fresco:animated-webp:2.5.0'
  implementation 'com.facebook.fresco:webpsupport:2.5.0'

  // 如果只需要支持WebP格式而不需要动图
  implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

import {Image } from 'react-native';
 <Image source={url："地址"} style={{width：400，height：200}}/> //注意网络图片一般加宽高，不是显示不出来

提示：我们改动了android里面的代码我们需要重新启动项目

---

总结

今天刚接触RN的组件，以后会陆续补充一些踩到的坑和一些总结