React-native Study notes Two

Today to write a component, I believe many people will use the--viewstack.

The Viewstack component is undoubtedly a very important component in the UI, but react-native is not embedded in it and needs to be implemented by the developer himself.

The implementation principle is simple, is to display a sub-view according to the index, with a render can be done:

1 render () {
2 return (
3 <View>
4 {this.props.children [this.props.index]}
5 </ View>
6);
7}
In this way, a simple ViewStack is completed, how to use it:

1 <ViewStack index = {this.state.tabIndex}>
2 <PageSNS />
3 <PageGroup />
4 <PageLibrary />
5 <PageChat />
6 <PageProfile />
7 </ ViewStack>
You can switch subviews by modifying the tabIndex of the state.

Is it quite simple! However, if you use it, you will find that there is a problem. When you switch back and forth, you will find that the status of the subview is reset every time. For example, on the PageSNS view, you scroll the list to the bottom, and then switch Go to other subviews, and switch back, you will find the list back to the top.

Then the question is coming, some developers want this experience, that's fine. And some requirements really need to retain state, so how to adjust?

Why is the subview reset? Then it involves the rendering mechanism of react. It will traverse all the child nodes once when rendering, unload all the unloaded, and load it to load, it is clear at a glance. Our simple version of ViewStack only renders a subview every time, and will be uninstalled at other times. When the view is to be re-rendered, the view is actually no longer there, just new (or from the object pool) After taking it out and initializing it), that's the problem.

So how do you preserve the state of the subviews? (This state is not the state mechanism of react, but rather the logical state of the entire view, okay, I ca n’t figure it out)

I did some tests and found that as long as the component is uninstalled, then this component cannot be recovered, or the recovery cost is a bit high. Of course, the method is there, and it is very simple, but this method is more reckless, listen to me.

When using the Navigator component, you will find that how can his subviews retain state. This is amazing. Does he save any references? Then I looked into the source code of Navigator and found that he pitted all the sub-views to render, and showed the view to be displayed, and moved to the outside of the screen without displaying it. It ’s that simple, I am also ignorant, It turned out to be this method, I believe you will also say an interjection like this, but it does so, so I say this method is a bit reckless.

Then I wrote version 2.0 of ViewStack:

 1 /**
 2 * Created by rockyl on 15/11/08.
 3 * /
 4 var React = require (‘react-native’);
 5 var {
 6 StyleSheet,
 7 Component,
 8 View,
 9} = React;
10 var Dimensions = require (‘Dimensions’);
11 var SCREEN_WIDTH = Dimensions.get (‘window‘). Width;
12 var SCREEN_HEIGHT = Dimensions.get (‘window‘). Height;
13
14 class ViewStack extends Component {
15 constructor (props) {
16 super (props);
17}
18
19 static get defaultProps () {
20 return {
21 index: 0,
twenty two         }
twenty three     };
twenty four 
25 render () {
26 this.views = this.props.children.map ((page, i) => {
27 var style = this.props.index == i? [Styles.viewBase]: [styles.viewBase, styles.viewDisabled];
28 return (
29 <View
30 key = {‘view_‘ + i}
31 style = {style}>
32 {page}
33 </ View>
34);
35});
36 return (
37 <View style = {[styles.container, this.props.style,]}>
38 {this.views}
39 </ View>
40);
41}
42}
43
44 var styles = StyleSheet.create ({
45 container: {
46 flex: 1,
47 overflow: ‘hidden’,
48},
49 viewBase: {
50 position: ‘absolute’,
51 overflow: ‘hidden’,
52 left: 0,
53 right: 0,
54 bottom: 0,
55 top: 0,
56},
57 viewDisabled: {
58 top: SCREEN_HEIGHT,
59 bottom: -SCREEN_HEIGHT,
60},
61});
62
63 module.exports = ViewStack;
so easy!

The usage is the same as the simple version.

Then, when you use it, you will find that this is awkward when switching, second cut, and a little lack of user experience, such as animations such as scrolling.

Version 2.1 will carry animation parameters and other advanced function parameters, then wait for this blog post to update!

react-native study notes 2