标签: react-native-swiper

我有一个使用react-native-swiper模块的本机组件。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: …

在我的应用程序中，我有Login Screen、ForgotPassword Screen和SignUp Screen。在注册屏幕中，我使用react-native-swiper来显示注册过程的三个步骤的幻灯片。我在StackNavigator 中包装了这些屏幕，并将这个StackNavigator作为根组件呈现在我的App.js 中。

这是我的StackNavigator：

路由器.js

import { createDrawerNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
import Login from './src/containers/Login';
import SignUp from './src/containers/SignUp';
import ForgotPassword from './src/containers/ForgotPassword';

const AuthStackNavigator = createStackNavigator({
    Login: {
        screen: Login
    },
    ForgotPassword: {
        screen: ForgotPassword
    },
    SignUp: {
        screen: SignUp
    },
});

const Router = createAppContainer(AuthStackNavigator)

export default Router

应用程序.js

import React, { Component } from …