如何在状态改变时正确地更新react原生卷帘组件？

Question

我有一个使用react-native-swiper模块的react原生组件。swiper中的一张幻灯片包含在组件状态下设置的文本。在这个组件中，我还有一个modal with表单，当用户尝试保存来自该模式的输入数据时，它会更改状态的文本。

问题是:在我目前的实现中，每次我保存一个新数据时，鼠标指针都会被拖到最后一张幻灯片上，然后重新渲染幻灯片(这个过程很慢)。所以我想知道更新幻灯片最好的方法是什么？

下面是我的组件：

'use strict';

import React from 'react';
import { 
  Dimensions, 
  StyleSheet, 
  View, 
  Text, 
  ScrollView,
  AlertIOS,
  AsyncStorage
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Swiper from 'react-native-swiper';
import Button from 'react-native-button';
import { saveName, getName } from '../Utils/dataService';
import { showAlert } from '../Utils/alert';
import HeaderSection from './HeaderSection';
import { styles } from '../Styles/Styles';
import { renderPagination } from './renderPagination';

class MainView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      currIndex: 0
    };
  }

  componentDidMount() {
    getName(val => this.setState({'name': val}));
  }

  showInputModal() {
    AlertIOS.prompt(
      'Enter New Doctor Name', null,
      [
        {
          text: 'Save',
          onPress: name => saveName(name, val => this.setState({'name': val}))
        },
        { text: 'Cancel', style: 'cancel' }
      ]
    );
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <Swiper ref='swiper' onIndexChanged={(index) => this.setState({'currIndex': index})}>
          <View style={styles.slide}>
            <Text style={styles.text}>Hello {this.state.name}</Text>
          </View>
        </Swiper>
        <Button onPress={this.showInputModal.bind(this)}>
          Customize
        </Button>
      </View>
    );
  }
}

export default MainView;

Answer 1

我也遇到过类似的问题。然后，我尝试从状态呈现Swiper (在您的例子中)，它优化了性能。我希望它也能解决你的问题。

只需将您的class MainView替换为以下内容：

class MainView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            currIndex: 0,
            swiper: this.renderSwpier
        };
    }

    componentDidMount() {
        getName(val => this.setState({'name': val}));
    }

    renderSwpier(){
        return(
            <Swiper ref='swiper' onIndexChanged={(index) => this.setState({'currIndex': index})}>
                <View style={styles.slide}>
                    <Text style={styles.text}>Hello {this.state.name}</Text>
                </View>
            </Swiper>
        )
    }

    showInputModal() {
        AlertIOS.prompt(
            'Enter New Doctor Name', null,
            [
                {
                    text: 'Save',
                    onPress: name => saveName(name, val => this.setState({'name': val}))
                },
                { text: 'Cancel', style: 'cancel' }
            ]
        );
    }

    render() {

        return (
            <View style={{flex: 1}}>
                {this.state.swiper.call(this)}
                <Button onPress={this.showInputModal.bind(this)}>
                    Customize
                </Button>
            </View>
        );
    }
}