DoneButton не выполняет рендеринг в режиме «реакция-нативное-приложение-интро-слайдер-рендеринг-на-проп-изменение» - PullRequest
Новая
       4

DoneButton не выполняет рендеринг в режиме «реакция-нативное-приложение-интро-слайдер-рендеринг-на-проп-изменение»

0 голосов
/ 17 января 2020

Я пытаюсь сделать тест с несколькими вариантами ответов, используя несколько вопросов, используя пакет React Native «response-native-app-intro-slider». Проблема заключалась в том, что этот пакет не переопределял элементы, когда что-то меняется, например, состояние. Я нашел похожий или переработанный пакет под названием «Reaction-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, где Я показываю учебный вводный текст на нескольких слайдах. Это делает кнопку «готово» в порядке. Но единственное отличие состоит в том, что я использовал пакет «response-native-app-intro-slider», а не «response-native-app-intro-slider-rerender-on-prop-change».

Пожалуйста помогите мне, если кто-то столкнулся с такой проблемой. Спасибо заранее ...

1 Ответ

0 голосов
/ 03 февраля 2020

Я наконец решил это. Я просто добавил условие в функцию «renderItem» AppIntroSlider, которая проверяет, является ли это последним слайдом. Если это так, он отображает кнопку, которая вызывает метод «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>)
        }
   )
}
...