React Native：使每个 Child 的 ScrollView 全高

Question

我有一个 ScrollView，它有两个 children，我希望每个 children 都是可用 space 的全高屏幕，意思是视图 1 填满了整个屏幕，然后我向下滚动开始看到幻灯片 2 的一部分。如果我一直向下滚动，我应该只会看到幻灯片 2。

我不知道该怎么做。当前发生的情况是每个 child 都填充了可用垂直 space 的一半，所以我没有得到任何滚动。

有什么办法可以实现这种布局吗？谢谢！

当前 UI: https://i.imgur.com/fZdbUSo.png

想要UI:

滚动前：https://i.imgur.com/EsQpVMm.png
一直向下滚动后：https://i.imgur.com/PfXQyfI.png

代码：

import React from "react";
import {
    StyleSheet,
    ScrollView,
    Text,
    View
} from "react-native";

const Home = () => {return (
    <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollViewContainer}>
        <View style={styles.slide1}>
            <Text>this should be full height</Text>
        </View>
        <View style={styles.slide2}>
            <Text>this should also be full height, but only be visible once i scroll down</Text>
        </View>
    </ScrollView>
)};

const styles = StyleSheet.create({
    slide1: {
        justifyContent: "center",
        flexGrow: 1,
        backgroundColor: "blue"
    },
    slide2: {
        justifyContent: "center",
        flexGrow: 1,
        backgroundColor: "green"
    },
    scrollView: {
        flex: 1
    },
    scrollViewContainer: {
        flexGrow: 1
    }
});

export default Home;

Answer 1

我不确定是否有办法用 flex 布局完成您想要完成的事情。

我建议获取可见容器的 height - window 的高度或以其他方式计算它， possibly using onLayout 包含查看并获得那里的高度，然后你必须使用它来设置你的两个内部视图的高度。您可能需要将 scrollView 包装在 View 中并使用其 onLayout 函数而不是 scrollView.

的函数

要完成问题的第二部分，scrollView 有一个可以设置的 snapToInterval 道具。

如果您需要代码示例，请告诉我这对您有何帮助。

Answer 2

我能够按照 Doug Watkins 的建议使用 onLayout() 并更新 children 的高度以匹配 parent [=12= 的高度]:

import React, { Component } from "react";
import {
    StyleSheet,
    ScrollView,
    Text,
    View,
    LayoutChangeEvent
} from "react-native";

class Home extends Component {
    state = {
        slideHeight: 0
    };

    updateHeight = (e: LayoutChangeEvent) => {
        this.setState({ slideHeight: e.nativeEvent.layout.height });
    };

    styles = StyleSheet.create({
        slide1: {
            justifyContent: "center",
            backgroundColor: "blue"
        },
        slide2: {
            justifyContent: "center",
            backgroundColor: "green"
        },
        scrollView: {
            flex: 1
        },
        scrollViewContainer: {
            flexGrow: 1
        }
    });

    render () {
        return (
            <ScrollView style={this.styles.scrollView} contentContainerStyle={this.styles.scrollViewContainer} onLayout={this.updateHeight}>
                <View style={[this.styles.slide1, {height: this.state.slideHeight}]}>
                    <Text>this should be full height</Text>
                </View>
                <View style={[this.styles.slide2, {height: this.state.slideHeight}]}>
                    <Text>this should also be full height, but only be visible once i scroll down</Text>
                </View>
            </ScrollView>
        )
    }
};

export default Home;

Answer 3

您可以使用react-native-swiper来实现这个功能。在swiper slides中设置你的数据或组件并设置props horizontal={false}以获得垂直滑动。

因此，首先使用此命令安装 react-native-swiper：

npm i react-native-swiper --save

现在，按如下方式导入和使用它：

import React from "react";
import { StyleSheet, ScrollView, Text, View } from "react-native";
import Swiper from "react-native-swiper";
const { width } = Dimensions.get("window");
const { height } = Dimensions.get("window");

const Home = () => {
  return (
    <Swiper style={{}} height={height} horizontal={false}>
      <View style={styles.slide1}>
        <Text>this should be full height</Text>
      </View>
      <View style={styles.slide2}>
        <Text>
          this should also be full height, but only be visible once i scroll
          down
        </Text>
      </View>
    </Swiper>
  );
};

const styles = StyleSheet.create({
  slide1: {
    justifyContent: "center",
    flexGrow: 1,
    backgroundColor: "blue",
  },
  slide2: {
    justifyContent: "center",
    flexGrow: 1,
    backgroundColor: "green",
  },
  scrollView: {
    flex: 1,
  },
  scrollViewContainer: {
    flexGrow: 1,
  },
});

export default Home;

我知道这可能不是完美的解决方案，但它可以解决。 Swiper本来就是用scrollview做的，所以可能没有问题。

React Native：使每个 Child 的 ScrollView 全高

React Native: Make Each Child of ScrollView Full Height

javascript

flexbox

react-native

react-native-flexbox