如何在 React Native 中制作没有导航的屏幕轮播视图

Question

我想实现屏幕的动态轮播视图（类似于 Swiper）。我正在考虑创建一个 View 的条件渲染，它将通过 selectedId 显示与每个屏幕相对应的屏幕，但这会导致在每个屏幕上重新渲染，除非我有每个屏幕的状态其中

有没有更好的解决方案可以在不使用导航的情况下制作屏幕轮播视图并保存屏幕上的数据？

Answer 1

我已将 react-native-progress-steps 用于此解决方案。我稍微修改了配置文件并为其编写了一个虚拟数据模板。

虚拟数据：

const reviewData = [
    {
        id: "1",
        serviceID: 0,
    },
    {
        id: "2",
        serviceID: 1,
    },
    {
        id: "3",
        serviceID: 2,
    },
];

渲染（忽略颜色）：

<View style={styles.container}>
            <ProgressSteps
                activeStepIconColor={defaultColors.white}
                completedProgressBarColor={settings.colors.primary}
                progressBarColor={defaultColors.light}
                activeStepIconBorderColor={settings.colors.primary}
                completedStepIconColor={settings.colors.primary}
                disabledStepIconColor={defaultColors.light}
                activeStepNumColor={defaultColors.dark}
                disabledStepNumColor={defaultColors.mediumLight}
            >
                {reviewData.map((item, index) => (
                    <ProgressStep
                        nextBtnStyle={styles.nextButtonStyle}
                        previousBtnStyle={
                            index === 0
                                ? styles.disabledButton
                                : styles.prevButtonStyle
                        }
                        nextBtnTextStyle={styles.nextButtonTextStyle}
                        previousBtnTextStyle={styles.prevButtonTextStyle}
                        previousBtnText={`Назад`}
                        nextBtnText={`Дальше`}
                        finishBtnText={`Завершить`}
                        previousBtnDisabled={index === 0 ? true : false}
                    >
                        <View style={{ alignItems: "left" }}>
                            <AppText>
                                {item.serviceID},{index}
                            </AppText>
                        </View>
                    </ProgressStep>
                ))}
            </ProgressSteps>
        </View>

我对解决方案很满意，但如果您有任何其他解决方案，请告诉我:)

如何在 React Native 中制作没有导航的屏幕轮播视图

How to Make Carousel View of Screens without Navigation in React Native

navigation

reactjs

react-native