typescript - Expo ScrollView stops working when sub directory layout contains a Stack layout - Stack Overflow

admin管理员组

文章数量:1314049

I have the following app file layout

app/
   story/
     _layout.tsx
     index.tsx
_layout.tsx
index.tsx

I am not sure why but when I use a Stack layout in one of the sub directories, the ScrollView I use at the top level layout stops working. If I remove the Stack layout (from app/story/_layout.tsx) then the scrolling starts working again.

I tried updating the Stack contentStyle with flex/flexGrow but neither made a difference. Can anyone explain why the scrolling stops when I use Stack navigation?

Also I noticed that the scrolling works in web mode but not on android but I'm guessing this is just because Stacks aren't a thing web view.

File Contents: app/_layout.tsx

import React from "react";
import { Slot } from "expo-router";
import { ScrollView, StyleSheet } from "react-native";

export default () => (
    <>
        <ScrollView style={styles.scroll} id="ui-scrollview" contentContainerStyle={styles.scrollContainer}>
            <Slot />
        </ScrollView>
    </>
);

const styles = StyleSheet.create({
    scroll: { flex: 1, height: "100%" },
    scrollContainer: { flexGrow: 1 },
});

app/index.tsx

import { router } from "expo-router";
import React from "react";
import { Button } from "react-native";

interface IAppIndexProps {}

const AppIndex: React.FC<IAppIndexProps> = () => {
    return <Button title="Story" onPress={() => router.push("/story")} />;
};

export default AppIndex;

app/story/_layout.tsx

import { Stack } from "expo-router";

export default () => <Stack />; // < ---- this stops scroll view working

app/story/index.tsx

import React from "react";
import { Text } from "react-native";

interface IStoryIndexProps {}

const lorem =
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

const StoryIndex: React.FC<IStoryIndexProps> = () => {
    return (
        <Text style={{ flex: 1 }}>
            //Large data to force scroll
            {lorem}
            {lorem}
            {lorem}
            {lorem}
            {lorem}
            {lorem}
            {lorem}
            {lorem}
            {lorem}
            {lorem}
            {lorem}
            {lorem}
        </Text>
    );
};

export default StoryIndex;

Example repo here

本文标签： typescriptExpo ScrollView stops working when sub directory layout contains a Stack layoutStack Overflow