React Native-在滚动视图中包装应用程序容器

我试图将我的整个导航打包到一个可滚动的容器中。

style 对比。 contentContainerStyle 等等,这会导致 ScrollView 围绕着一个实际可滚动的应用程序容器。

以下几点都很好:

class Asdf extends React.Component {
    render() {
        return (
            <View>
                <Text
                    style={{
                        fontSize: 100
                    }}
                >
                    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.
                </Text>
            </View>
        );
    }
};

export default class App extends React.Component {
  render() {
    return (
            <ScrollView
                contentContainerStyle={{
                    flexGrow: 1
                }}
            >
                <Asdf />
            </ScrollView>
    );
  }
};

不过,渲染navigator及其应用程序容器会立即使其滚动功能“最大化”,并在我的iPhone上使用任何滚动方式执行跳弹动画:

class Asdf extends React.Component {
    render() {
        return (
            <View>
                                <Text
                    style={{
                        fontSize: 100
                    }}
                >
                    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.
                </Text>
            </View>
        );
    }
};

const
    Hjkl = createStackNavigator({
        Asdf: Asdf
    }),

    Qwer = createAppContainer(Hjkl);

export default class App extends React.Component {
  render() {
    return (
            <ScrollView
                contentContainerStyle={{
                    flexGrow: 1
                }}
            >
                <Qwer />
            </ScrollView>
    );
  }
};

我试着确定,真的。