[英]How to properly update a react native swiper component when state changes?
I have a react native component that uses react-native-swiper
module. 我有一个使用react-native-swiper
模块的react本机组件。 One of the slides in the swiper contains text which is set in the component's state. swiper中的一个幻灯片包含在组件状态中设置的文本。 In the component I also have a modal with form that changes the state's text when user tries to save the input data from the modal. 在组件中,我还有一个带有窗体的模态,当用户尝试从模态中保存输入数据时,该窗体会更改状态的文本。
The question is: in my current implementation, every time I saves a new data, the swiper gets dragged to the last slide, and re-render the slides (the process is laggy). 问题是:在我当前的实现中,每次我保存新数据时,swiper都会被拖动到最后一张幻灯片,并重新渲染幻灯片(过程是滞后的)。 So I wonder what's the best way to update the slides more smoothly? 所以我想知道更顺畅更新幻灯片的最佳方法是什么?
Below is my component: 以下是我的组件:
'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;
I had the similar problem. 我有类似的问题。 Then I tried rendering the Swiper
(in your case) from the state and it optimizes the performance. 然后我尝试从状态渲染Swiper
(在你的情况下)并优化性能。 I hope it will solve your problem too. 我希望它也能解决你的问题。
Just replace your class MainView
with this one: 只需用以下内容替换您的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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.