React Native-将应用容器包装在ScrollView中

时间:2019-05-21 08:37:03

标签: reactjs react-native scroll navigation containers

我正在尝试将整个导航包装在可滚动的容器中。

尽管我已经尝试过,但是我无法找到Flex属性的正确排列,stylecontentContainerStyle等导致实际上围绕应用容器的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>
    );
  }
};

但是,渲染导航器及其应用程序容器会立即导致其“最大化”其滚动功能,并通过任何滚动方式在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>
    );
  }
};

非常感谢能够提供使该代码正常工作的一行代码的人。

我确实试图确定它。

0 个答案:

没有答案