React Native:ScrollView 的 Flex 不起作用
React Native: Flex for ScrollView doesn't work
我有一个简单的视图,它有两个子视图,另一个视图和一个滚动视图。 ScrollView 应该比同级别的 View 高 5 倍,使用 flexbox。
<View style={{ flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}}>
<Text>Add new stuff</Text>
<Button title="Browse Gallery" onPress={ openGallery } />
</View>
<ScrollView style={{flex: 5, backgroundColor: 'skyblue'}}>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
</ScrollView>
</View>
所以我只是将 flex:1 和 flex:5 添加到子视图中,但在渲染视图中它们都正好适合屏幕的一半。好像忽略了两个flex属性...
顺便说一句,使用第二个视图代替 ScrollView 效果很好!
关于如何使用 ScrollView 实现 1:5 比例有什么想法吗?
ScrollView 是一个不继承 flex
使用的组件。你想要做的是将 ScrollView 包装在一个 View 中,这将创建你想要的弹性比率。
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}}>
<Text>Add new stuff</Text>
<Button title="Browse Gallery" onPress={ openGallery } />
</View>
<View style={{flex: 5}}>
<ScrollView style={{backgroundColor: 'skyblue'}}>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
</ScrollView>
</View>
</View>
要实现1:5屏幕比例,子组件View和ScrollView相对于父View,可以按如下方式编码:
<View style={{ flex: 1}}>
<View style={{flex: 1/5, backgroundColor: 'powderblue'}}>
<Text>Add new stuff</Text>
<Button title="Browse Gallery" onPress={ openGallery } />
</View>
<ScrollView style={{flex: 4/5, backgroundColor: 'skyblue'}}>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
</ScrollView>
</View>
我有一个简单的视图,它有两个子视图,另一个视图和一个滚动视图。 ScrollView 应该比同级别的 View 高 5 倍,使用 flexbox。
<View style={{ flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}}>
<Text>Add new stuff</Text>
<Button title="Browse Gallery" onPress={ openGallery } />
</View>
<ScrollView style={{flex: 5, backgroundColor: 'skyblue'}}>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
</ScrollView>
</View>
顺便说一句,使用第二个视图代替 ScrollView 效果很好!
关于如何使用 ScrollView 实现 1:5 比例有什么想法吗?
ScrollView 是一个不继承 flex
使用的组件。你想要做的是将 ScrollView 包装在一个 View 中,这将创建你想要的弹性比率。
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}}>
<Text>Add new stuff</Text>
<Button title="Browse Gallery" onPress={ openGallery } />
</View>
<View style={{flex: 5}}>
<ScrollView style={{backgroundColor: 'skyblue'}}>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
</ScrollView>
</View>
</View>
要实现1:5屏幕比例,子组件View和ScrollView相对于父View,可以按如下方式编码:
<View style={{ flex: 1}}>
<View style={{flex: 1/5, backgroundColor: 'powderblue'}}>
<Text>Add new stuff</Text>
<Button title="Browse Gallery" onPress={ openGallery } />
</View>
<ScrollView style={{flex: 4/5, backgroundColor: 'skyblue'}}>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
</ScrollView>
</View>