使设计在React-Native中的Scroll View中工作

时间:2017-12-31 21:14:31

标签: android ios react-native flexbox native-base

我目前正在尝试在Scroll View中的React Native中进行设计工作。布局按预期工作,没有滚动视图,但使用滚动视图,它会向下拉伸。任何建议或意见将不胜感激。 :)

没有ScrollView

<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                <View style={{ position: 'absolute', flexDirection: 'column', justifyContent: 'flex-start' }}>
                    <LinearGradient
                        start={{ x: 0.0, y: 1.0 }} end={{ x: 1.0, y: 0.0 }}
                        colors={['#1E2AC0', '#347FC4']}
                        style={{ height: height * 0.4, width: width }}
                    />
                    <View style={{ height: height * 0.6, width: width, backgroundColor: '#FFFFFF', alignSelf: 'flex-end' }} />
                </View>
                <View style={{ paddingTop: height*0.6-30, width: width * 0.9, backgroundColor: 'transparent', alignSelf: 'center' }}>
                   //TextInput and Button
                </View>

            </View>

enter image description here

这看起来像我希望它看起来的方式。但是,当我向上滚动时,我希望视图上升。但是当我使用滚动视图时,这就是开始时发生的事情。由于某种原因,顶部会被拉长。

使用ScrollView

<ScrollView>
   //Same Code as above
</ScrollView>

enter image description here

0 个答案:

没有答案