ScrollView底部无法显示全的比较简单的解决方法

最新推荐文章于 2021-06-11 10:44:01 发布

原创最新推荐文章于 2021-06-11 10:44:01 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨React Native中Flexbox布局的使用方法，通过实例展示如何利用flex属性实现屏幕的合理分区，包括固定高度的导航栏及可滚动内容区域的设置。

import React, { Component } from 'react';
import { AppRegistry,ScrollView, View,Text } from 'react-native';

export default class FlexDirectionBasics extends Component {
render() {
return (
// 比如父组件为整个屏幕的大小，设置flex：1
<View style={{backgroundColor: 'red',flex:1}}>
<View style={{height:20,backgroundColor: 'red',}}>//这一部分用于开发中的导航栏或者其他的部分
<Text>13333333</Text></View>
<ScrollView style={{flex: 1,backgroundColor: 'powderblue',}}>//剩余部分显示滚动
<Text>13333333</Text>
<Text>13333333</Text>
<Text>13333333</Text>
<Text>13333333</Text><Text>13333333</Text><Text>13333333</Text><Text>13333333</Text>
<Text>13333333</Text><Text>13333333</Text><Text>13333333</Text><Text>13333333</Text>
<Text>13333333</Text><Text>13333333</Text><Text>13333333</Text><Text>13333333</Text>
<Text>13333333</Text><Text>13333333</Text><Text>13333333</Text><Text>13333333</Text>
<Text>13333333</Text><Text>13333333</Text><Text>13333333</Text><Text>13333333</Text>
<Text>13333333</Text><Text>13333333</Text><Text>13333333</Text><Text>13333333</Text>
<Text>13333333</Text><Text>13333333</Text><Text>13333333</Text><Text>13333333</Text>
<Text>13333333</Text><Text>13333333</Text><Text>13333333</Text><Text>13333333</Text>
<Text>13333333</Text><Text>13333333</Text><Text>13333333</Text><Text>13333333</Text>
</ScrollView>
</View>
);
}
};