react-native-swiper 高度道具不起作用

问题描述

我正在使用 react-native-swiper 来实现刷屏功能。但是，它的 height 道具不起作用。 height 道具基本上用于 ScrollView 元素内的内容。我正在使用 renderPagination 为导航渲染页脚，并为它提供 20% 高度，并为 80% 提供 ScrollView（通过 scrollViewStyle 道具。ScrollView 组件并且页脚工作正常，但 ScrollView 中的内容溢出并隐藏在页脚后面。我添加了一些断点，height 道具获得了正确的值，{{1} 中的内容}} 也被正确呈现，但在我恢复执行后，ScrollView 事件被触发，新高度（屏幕的全高）被设置为 onLayout 内的内容。我该如何防止这种情况发生或者我做错了什么？ 截图（view里面的内容分为等高的两部分：Header和Content）：

1. 关于暂停执行

   

2. 恢复执行后（“内容”隐藏在页脚后面）

   

代码 AuthenticationScreens.js

ScrollView

幻灯片.js

import React from 'react';
import {
    View,Text,} from 'react-native';
import Swiper from 'react-native-swiper';

// import defaultStyle from './style';
import Slide from '../Slide/index';
import SlideFooter from '../SlideFooter/index';


const AuthenticationScreens = () => {

    const handlePagination = () => (
        <SlideFooter />
    )

    return (
        <Swiper
            height="100%"
            loop={false}
            scrollViewStyle={{ height: "80%",borderWidth: 3,borderColor: 'purple',backgroundColor: "pink" }}
            showsPagination={true}
            renderPagination={handlePagination}
        >
            <Slide />
            <Slide />
        </Swiper>
    )
}

export default AuthenticationScreens;

SlideFooter.js

import React from 'react';
import {
    View,Text
} from 'react-native';
import styles from '../WelcomeScreens/WelcomeScreensstyle';
import defaultStyles from './style'

const Slide = props => {
    const {
        // container = defaultStyles.container,Header = (
            <View 
                style={{
                    flex: 1,justifyContent: 'center',alignItems: 'center',borderWidth: 1,borderColor: 'black'
                }}
            >
                <Text>
                    Header
                </Text>
            </View>
        ),Content = (
            <View 
                style={{
                    flex: 1,borderColor: 'yellow'
                }}
            >
                <Text>
                    Content
                </Text>
            </View>
        ),} = props;

    return (
        <>
            { Header }
            { Content }
        </>
    )
}

export default Slide;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）