DoneButton 未在 'react-native-app-intro-slider-rerender-on-prop-change' 中呈现
DoneButton is not rendering in 'react-native-app-intro-slider-rerender-on-prop-change'
我正在尝试使用 React Native 包 'react-native-app-intro-slider' 进行多项选择测试,其中包含一些问题。问题是当某些东西发生变化时,这个包没有重新呈现项目,例如状态。我发现了一个名为 'react-native-app-intro-slider-rerender-on-prop-change' 的类似或重构的包,它做了同样的事情,但在状态更改时重新呈现项目。但问题是它不会在最后一张幻灯片上呈现完成按钮。
我使用的最后一个包是这个:
import AppIntroSlider from 'react-native-app-intro-slider-rerender-on-prop-change';
'MCTContainer'(多选容器)class 的渲染方法是:
render() {
if (this.state.showRealApp) {
this.props.navigation.navigate('TopicGroupDetails', { topicGroup: this.state.topicGroup });
return null;
} else {
const questions = this.state.questions;
return (
<AppIntroSlider
renderItem={this._renderItem}
slides={questions}
onDone={this._onDone}
onSkip={this._onDone}
activeDotStyle={{ backgroundColor: '#039BE5' }}
showPrevButton
showNextButton
showSkipButton
showDoneButton
renderPrevButton={this._renderPrevButton}
renderNextButton={this._renderNextButton}
renderSkipButton={this._renderSkipButton}
renderDoneButton={this._renderDoneButton}
/>
)
}
}
它的 renderDoneButton 方法如下所示:
_renderDoneButton = () => {
return (
<View style={styles.buttonCircle}>
<Icon
name="check"
color="#039BE5"
size={24}
style={{ backgroundColor: 'transparent' }}
/>
</View>
);
};
这实际上是相同的,与我在组件 'SliderComponent' 中使用的完全相同,在该组件中,我在多张幻灯片中显示了教程介绍性文本。它使 'done' 按钮正常。但唯一的区别是我在那里使用了包 'react-native-app-intro-slider',而不是 'react-native-app-intro-slider-rerender-on-prop-change'。
如果有人遇到过这样的问题,请帮助我。提前致谢...
我终于解决了。
我刚刚在 "AppIntroSlider" 的 "renderItem" 函数上添加了一个条件,用于检查它是否是最后一张幻灯片。如果是,它会呈现一个按钮,该按钮调用 "AppIntroSlider"-s“_onDone”方法来完成幻灯片放映。
_renderItem = ({item}) => {
return(
{
(this.state.isLastSlide) ?
(
<TouchableHighlight
onPress={this._onDone}
>
<View>
<Text>
COMPLETE SLIDE SHOW
</Text>
<Icon
name="check"
color="white"
size={24}
/>
</View>
</TouchableHighlight>
) :
(<View></View>)
}
)
}
我正在尝试使用 React Native 包 'react-native-app-intro-slider' 进行多项选择测试,其中包含一些问题。问题是当某些东西发生变化时,这个包没有重新呈现项目,例如状态。我发现了一个名为 'react-native-app-intro-slider-rerender-on-prop-change' 的类似或重构的包,它做了同样的事情,但在状态更改时重新呈现项目。但问题是它不会在最后一张幻灯片上呈现完成按钮。
我使用的最后一个包是这个:
import AppIntroSlider from 'react-native-app-intro-slider-rerender-on-prop-change';
'MCTContainer'(多选容器)class 的渲染方法是:
render() {
if (this.state.showRealApp) {
this.props.navigation.navigate('TopicGroupDetails', { topicGroup: this.state.topicGroup });
return null;
} else {
const questions = this.state.questions;
return (
<AppIntroSlider
renderItem={this._renderItem}
slides={questions}
onDone={this._onDone}
onSkip={this._onDone}
activeDotStyle={{ backgroundColor: '#039BE5' }}
showPrevButton
showNextButton
showSkipButton
showDoneButton
renderPrevButton={this._renderPrevButton}
renderNextButton={this._renderNextButton}
renderSkipButton={this._renderSkipButton}
renderDoneButton={this._renderDoneButton}
/>
)
}
}
它的 renderDoneButton 方法如下所示:
_renderDoneButton = () => {
return (
<View style={styles.buttonCircle}>
<Icon
name="check"
color="#039BE5"
size={24}
style={{ backgroundColor: 'transparent' }}
/>
</View>
);
};
这实际上是相同的,与我在组件 'SliderComponent' 中使用的完全相同,在该组件中,我在多张幻灯片中显示了教程介绍性文本。它使 'done' 按钮正常。但唯一的区别是我在那里使用了包 'react-native-app-intro-slider',而不是 'react-native-app-intro-slider-rerender-on-prop-change'。
如果有人遇到过这样的问题,请帮助我。提前致谢...
我终于解决了。 我刚刚在 "AppIntroSlider" 的 "renderItem" 函数上添加了一个条件,用于检查它是否是最后一张幻灯片。如果是,它会呈现一个按钮,该按钮调用 "AppIntroSlider"-s“_onDone”方法来完成幻灯片放映。
_renderItem = ({item}) => {
return(
{
(this.state.isLastSlide) ?
(
<TouchableHighlight
onPress={this._onDone}
>
<View>
<Text>
COMPLETE SLIDE SHOW
</Text>
<Icon
name="check"
color="white"
size={24}
/>
</View>
</TouchableHighlight>
) :
(<View></View>)
}
)
}