Realization of React-Native Sliding Claying Effect


recently developed mobile terminal directional bias, so he was transferred to do RN (react-native), experience is also good, there is a current demand is intermediate ceiling Home the effect, though it has been a writing style, but this common pattern should be so-easy, not wishing overturned, search online for a few programs will not work, and finally to copy the packaged library to implement on github, now the rollover process recorded.

needs effect


rollover procedure

The first one solution failed

thinking this is the beginning, the public thinking, we need to scroll the page status is monitored, and when the page scrolls to the location where you want the time in which the ceiling elements, we set it to a fixed position, but unfortunately, RN for the position property provides only two layout: absolute and relative, neither fixed nor still in the testing api: sticky. Awkward & # 128517;

The second program failure

but do not panic, see online the second option, the map three as a second local ScrollView, then monitor ScrollView slide from the first block marginTop negative value, so the first portion can not slide but does not meet the requirements, pass

the third embodiment is completely failed

found from the internet to the third embodiment, is one hundred twenty-three as part of the ScrollView,

is set to position the first portion absolute, the rest is not provided, the default is the relative

the second portion (ceiling portion) provided marginTop (the setState) a first portion of the height of the state,

Adding Sliding OnScroll Event = “Sliding Distance Y is equal to the second part of Margintop’s State, but when the slide exceeds the first portion, set the second part (the top portion) position to AbSolute, and put Its margintop is set to 0, it looks good, actually use the iOS simulator to spend a speechless & # 128517; the effect is very wonderful, the finger is sliding directly, it is directly to hide the whole half, and a loose suddenly succeeded. . .

react-native滑动吸顶效果的实现过程 When IOS system, the finger is scrolled on the screen, the onscroll has been triggered, if there is a setState method, STATE will not be executed and calculated, but change the reference is asynchronous, as long as the finger does not leave the screen, the changed State cannot take effect (trigger interface rendering)


I finally realized that due to the mechanism of iOS, React’s State mechanism could not meet the needs. The RN definitely had a way of native rendering, so after github finds ready-made code implementation, in turn Research, everyone has RN rich experience can also look directly at the bottom code & # 128071;
RN’s Animator

RN of Animator Animation The library is designed to solve the animation problem. Due to the JS bridge process, animations usually cannot be well displayed. It is best to send the animation data and change methods to native, treated by native, which is the core role of the Animator library.

I remember that the animation of RN has always been spit, but now the effect is quite good, it may be more and more improved with mobile phone hardware in recent years.

Simple usage

Since the four components are encapsulated in the animator, the default can be derived by default


, ,

In these assemblies inside to do some animation processing, data also react aspects of the state, but the assignment to give Animated.Value, As the following & # 128071; THIS.State = {scrolly: new animated.value (0)}

Although it is used or native State, the rendering mechanism is completely different from


passing by Animator After packaging, it will traverse the incoming PROPS and its own state, find if there is an instance of Animated.Value, and bind to the corresponding native operation.

When PROPS and its own State change, turn the animated.value value to normal values, and then hand it over to native rendering, but it is worth noting that it does not trigger Render Render, There will be something Domdiff, it is a special handle, similar to animated.value changes each time the stayupdateComponent returned to False (the rendering of milliseconds “, the ShouldUpdateComponent function judges animated.value, then Sending data to native component
For complete introduction, please write the Chinese official website Animator library


Since I use the Animator component, the rendering problem is solved, the following ideas is to dynamically set the translation component of the ceiling assembly. STYLE: {Transform: [{TRANSlated: TranslateY}]}
When sliding down, regardless of whether it

is slipped, but when the head is not completely hidden, no matter Slide, the head is completely unsight, then slide it again, then his translatey should = the total distance of the top – the height of the head, so the more it is slid, so the ceiling assembly is pushed down, so sucking The top assembly is firmly fixed at the top

Using interpolation to achieve

  • const translatey = scrolly.Interpolate ({INPUTRANGE : [-1, 0, HeaderHeight, HeaderHeight + 1], OutputRange: [0, 0, 0, 1],};

Interpolate is slightly difficult to understand, It takes a little foundation. Here, this article is too long. It is too long to introduce,
 If you don't understand it, you can go online to find this information   
Implementation of source code

The core code of the second portion of the ceiling function

Import * AS React from ‘React’ ; import {StyleSheet, Animated} from “react-native”; / ** * slide assembly ceiling effect * @export * @class StickyHeader * / export default class StickyHeader extends React.Component {static defaultProps = {StickyHeadery: -1, stickyscrolly: new animated.value (0)} constructor (props) {super (props); this.State = {stickyOuty: 0,};} // compatible code, prevent no head height _OnLayout = (event) => {this.setState ({stickyLayoutY: event.nativeEvent.layout.y,});} render () {const {stickyHeaderY, stickyScrollY, children, style} = this.props const {stickyLayoutY} = this .state let y = stickyheadry! = -1? stickyheadry: stickyLayouty; const translate = stickyscrolly.interpolate ({INPUTRANGE: [-1, 0, y, y + 1], OutputRange: [0, 0, 0, 1], }); return ( {children} )}}} const stYLES = stylesheet.create ({Container: {zindex: 100},});

The actual usage of the page is as follows
     // constructor in the statement page statethis.state = {scrollY: new Animated.Value (0), headHeight: -1}; 

   {let {height} = e.nativeEvent.layout; this.setState ({headHeight: height}); // to the head height assignment}}> // placed inside the first portion of the assembly 
// component placed inside the second portion
// this is the list of components of the third portion
this._createListItem (item) } />
      ending     specific code is achieved, and a relatively perfect solution, in particular, to take care of the performance, you can be based on this package to implement more complex needs, the principle is probably this principle, and in the front field of animation, that he did it just entry level, any questions, please point out. 
In addition, it is that component github I find the code address: https: //, attach the original address, if the project is recommended to use the others a star


that’s all for this article, I hope the content of this article has some reference value of learning for all of us to learn or work, thank you It supports Tumi clouds.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment