DoneButton 未在“react-native-app-intro-slider-rerender-on-prop-change”中呈现答案

【问题标题】：DoneButton is not rendering in 'react-native-app-intro-slider-rerender-on-prop-change'DoneButton 未在“react-native-app-intro-slider-rerender-on-prop-change”中呈现
【发布时间】：2020-01-17 07:11:58
【问题描述】：

我正在尝试使用 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'（多选容器）类的渲染方法是：

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”完全相同。它使“完成”按钮很好。但唯一的区别是我在那里使用了包“react-native-app-intro-slider”，而不是“react-native-app-intro-slider-rerender-on-prop-change”。

如果有人遇到这样的问题，请帮助我。提前谢谢...

【问题讨论】：

标签： react-native react-native-android

【解决方案1】：

我终于解决了。我刚刚在“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>)
        }
   )
}

【讨论】：