Как правильно обновить реагирующий нативный компонент swiper при изменении состояния?

Question

У меня есть собственный компонент реагирует, который использует react-native-swiper модуль. Один из слайдов в swiper содержит текст, который установлен в состоянии компонента. В компоненте у меня также есть модальный с формой, которая изменяет текст состояния, когда пользователь пытается сохранить входные данные из модального.

Вопрос в том, что в моей текущей реализации, каждый раз, когда я сохраняю новые данные, свипер перетаскивается на последний слайд и перерисовывает слайды (процесс запаздывает). Так что мне интересно, как лучше обновить слайды более плавно?

Ниже мой компонент:

'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>
        );
    }
}