激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

React Native動畫效果實現(xiàn)，布局方式以及UI界面還原

發(fā)布時間：2024-08-22 20:43:46 瀏覽量：166次

在React Native中，UI和Android XML布局的編寫方式有很多相似之處。
React Native框架中，通過Bridge實現(xiàn)了JSX源碼和原生框架的通信。當(dāng)調(diào)用React Native提供的API時，React Native框架會通過Bridge調(diào)用原生框架的方法。

React Native底層為React框架，通過虛擬DOM和diff算法，實現(xiàn)了只需控制state和props變更即可實現(xiàn)iOS和Android平臺的UI變更，同時生成main.bundle.js文件供App加載。

在React Native中使用了Yoga這個基于C語言實現(xiàn)的CSS3/Flexbox布局引擎，讓界面布局更加簡單，且適用于多平臺。

推薦閱讀：點擊咨詢

UI組件

React Native Android View iOS View Web Analog Description
<View> <ViewGroup> <UIView> <div> A container that supports layout with flexbox, style, some touch handling, and accessibility controls
<Text> <TextView> <UITextView> <p> Displays, styles, and nests strings of text and even handles touch events
<Image> <ImageView> <UIImageView> <img> Displays different types of images
<ScrollView> <ScrollView> <UIScrollView> <div> A generic scrolling container that can contain multiple components and views
<TextInput> <EditText> <UITextField> <input type="text"> Allows the user to enter text

核心組件和API：點擊咨詢

UI樣式

為了給React-Native組件加上樣式，你需要在JavaScript中添加樣式表。

const styles = StyleSheet.create({  blueText: {    color: 'blue',    fontSize: 30,  }});

StyleSheet.create可以彌補編寫復(fù)雜樣式時，不能使用css的不便。

寬高單位與布局調(diào)整

RN中寬高可以直接通過style指定，與web不同的是，RN中尺寸是無單位的，表示與設(shè)備像素?zé)o關(guān)的邏輯像素點。推薦閱讀《Android XML與HTML5 排布布局分析與對比—style的異同》。

動畫

React Native提供了兩個互補的動畫系統(tǒng)：用于創(chuàng)建精細的交互控制的動畫Animated和用于全局的布局動畫LayoutAnimation。

Animated

Animated旨在以聲明的形式來定義動畫的輸入與輸出，在其中建立一個可配置的變化函數(shù)，然后使用start/stop方法來控制動畫按順序執(zhí)行。 Animated僅封裝了 6 個可以動畫化的組件：View、Text、Image、ScrollView、FlatList和SectionList，不過你也可以使用Animated.createAnimatedComponent()來封裝你自己的組件。

import React, { useRef, useEffect } from 'react';import { Animated, Text, View } from 'react-native';const FadeInView = (props) => {  const fadeAnim = useRef(new Animated.Value(0)).current;  React.useEffect(() => {    Animated.timing(      fadeAnim,      {        toValue: 1,        duration: 10000,      }    ).start();  }, [fadeAnim])  return (          {props.children}      );}export default () => {  return (    Fading in  )}

這一過程經(jīng)過特別優(yōu)化，執(zhí)行效率會遠高于反復(fù)調(diào)用setState和多次重渲染。

因為這一過程是純聲明式的，因此還有進一步優(yōu)化的空間，比如我們可以把這些聲明的配置序列化后發(fā)送到一個高優(yōu)先級的線程上運行。

配置動畫

動畫擁有非常靈活的配置項。自定義的或預(yù)定義的 easing 函數(shù)、延遲、持續(xù)時間、衰減系數(shù)、彈性常數(shù)等都可以在對應(yīng)類型的動畫中進行配置。

Animated.timing(this.state.animatedValue, {  toValue: 1,  easing: Easing.back(),  duration: 2000}).start();

詳細配置動畫信息請參考：點擊咨詢

組合動畫

多個動畫可以通過parallel（同時執(zhí)行）、sequence（順序執(zhí)行）、stagger和delay來組合使用。它們中的每一個都接受一個要執(zhí)行的動畫數(shù)組，并且自動在適當(dāng)?shù)臅r候調(diào)用start/stop。

Animated.sequence([  // decay, then spring to start and twirl  Animated.decay(position, {    velocity: { x: gestureState.vx, y: gestureState.vy },    deceleration: 0.997  }),  Animated.parallel([    // after decay, in parallel:    Animated.spring(position, {      toValue: { x: 0, y: 0 }    }),    Animated.timing(twirl, {      toValue: 360    })  ])])

默認情況下，如果任何一個動畫被停止或中斷了，組內(nèi)所有其它的動畫也會被停止。Parallel 有一個stopTogether屬性，如果設(shè)置為false，可以禁用自動停止。

在Animated文檔的組合動畫一節(jié)中列出了所有的組合方法。

合成動畫值

const a = new Animated.Value(1);const b = Animated.divide(1, a);Animated.spring(a, {  toValue: 2}).start();

可以使用加減乘除以及取余等運算來把兩個動畫值合成為一個新的動畫值。

插值

每個動畫屬性都可以設(shè)置值變化區(qū)間

style={{    opacity: this.state.fadeAnim,    transform: [{      translateY: this.state.fadeAnim.interpolate({        inputRange: [-300, -100, 0, 100, 101],        outputRange: [150, 0]       }),    }],  }}

interpolate()還支持定義多個區(qū)間段落，常用來定義靜止區(qū)間等。

跟蹤動態(tài)值

Animated.spring(follower, { toValue: leader }).start();Animated.timing(opacity, {  toValue: pan.x.interpolate({    inputRange: [0, 300],    outputRange: [1, 0]  })}).start();

比如在上面

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定