kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-03-29 22:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Reduce extra rendering in NavigationCard

Browse Source 
Summary: This adds a new SceneView with a shouldComponentUpdate policy of only re-rendering when the scene's state changes. This allows avoidance of extra re-renders. Results in a much smoother back-swipe gesture because we no longer re-render scenes as we transition from gesture to animation.

Reviewed By: hedgerwang

Differential Revision: D3219545

fb-gh-sync-id: 7c04e0e4ebb40d1e57ef7af11e2e54adf4f52aa0
fbshipit-source-id: 7c04e0e4ebb40d1e57ef7af11e2e54adf4f52aa0
This commit is contained in:
Eric Vicenti
2016-05-03 13:30:24 -07:00
committed by Facebook Github Bot 2
parent 20d53b1f23
commit bb39a2e9da
2 changed files with 46 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
Examples/UIExplorer/UIExplorerExampleList.js
View File

@@ -1,4 +1,11 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
@@ -15,26 +22,21 @@
*/
'use strict';
const ListView = require('ListView');
const React = require('react');
const ReactNative = require('react-native');
const StyleSheet = require('StyleSheet');
const Text = require('Text');
const TextInput = require('TextInput');
const NavigationContainer = require('NavigationContainer');
const TouchableHighlight = require('TouchableHighlight');
const View = require('View');
const UIExplorerActions = require('./UIExplorerActions');
const {
ListView,
NavigationExperimental,
StyleSheet,
Text,
TextInput,
TouchableHighlight,
View,
} = ReactNative;
const createExamplePage = require('./createExamplePage');
const {
Container: NavigationContainer,
} = NavigationExperimental;
import type {
UIExplorerExample,
} from './UIExplorerList.ios'
} from './UIExplorerList.ios';
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
@@ -154,7 +156,7 @@ class UIExplorerExampleList extends React.Component {
}
_handleRowPress(exampleKey: string): void {
this.props.onNavigate(UIExplorerActions.ExampleAction(exampleKey))
this.props.onNavigate(UIExplorerActions.ExampleAction(exampleKey));
}
}
@@ -167,7 +169,7 @@ function makeRenderable(example: any): ReactClass<any> {
UIExplorerExampleList = NavigationContainer.create(UIExplorerExampleList);
UIExplorerExampleList.makeRenderable = makeRenderable;
var styles = StyleSheet.create({
const styles = StyleSheet.create({
listContainer: {
flex: 1,
},