0

我正在使用 react-native-swiper 来实现滑动屏幕功能。但是，它的height道具不起作用。heightprop 基本上是针对元素内部的内容的ScrollView。我正在使用 renderPagination 渲染页脚以进行导航并为其和（通过道具）赋予高度。组件20%和页脚工作正常，但里面的内容溢出并隐藏在页脚后面。我添加了一些断点并且道具得到了正确的值并且里面的内容也得到了正确的渲染，但是在我恢复执行之后，事件被触发并且新的高度（屏幕的全高）被设置为里面的内容80%ScrollViewscrollViewStyleScrollViewScrollViewheightScrollViewonLayoutScrollView. 我该如何防止这种情况或我做错了什么？截图（视图内的内容分为高度相等的两部分：Header 和 Content）：

  1. 在暂停执行时 在此处输入图像描述
  2. 恢复执行后（“内容”隐藏在页脚后面） 在此处输入图像描述

代码 AuthenticationScreens.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;

幻灯片.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,
                    justifyContent: 'center',
                    alignItems: 'center',
                    borderWidth: 1,
                    borderColor: 'yellow'
                }}
            >
                <Text>
                    Content
                </Text>
            </View>
        ),
    } = props;

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

export default Slide;

SlideFooter.js

import React from 'react';
import {
    View,
    Text
} from 'react-native';
import defaultStyle from './style';

const SlideFooter = () => (
    <View style={defaultStyle.footer}>
        <Text>
            Footer
        </Text>
    </View>
)

const defaultStyle = StyleSheet.create({
    footer: {
        height: "25%",
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'orange'
    }
});

export default SlideFooter;
4

0 回答 0