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