reactjs - 当状态发生变化时，如何正确更新 react native 滑动器组件？

Question

我有一个使用 react-native-swiper 模块的 React Native 组件。滑动器中的一张幻灯片包含在组件状态中设置的文本。在组件中，我还有一个带有表单的模态，当用户尝试从模态保存输入数据时，它会更改状态文本。

问题是:在我当前的实现中，每次保存新数据时，滑动器都会被拖动到最后一张幻灯片，并重新渲染幻灯片(该过程很滞后)。所以我想知道更顺利地更新幻灯片的最佳方法是什么？

下面是我的组件:

'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 (在您的情况下)，它优化了性能。我希望它也能解决您的问题。

只需将您的类 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>
        );
    }
}