我有一个使用ScrollView的非常简单的例子,我似乎无法滚动到底部.

这个例子是完全基本的,我没有做任何特别的事情,但最后一个项目从来没有完全可见.

Expo Code

 import React, { Component } from "react";
 import { Text, View, ScrollView, StyleSheet } from "react-native";
 import { Constants } from "expo";

 const data = Array.from({ length: 20 }).map((_, i) => i + 1);

 export default class App extends Component {
  render() {
    return (
        <ScrollView style={styles.container}>
            {data.map(d => (
                <View style={styles.view}>
                    <Text style={styles.text}>{d}</Text>
                </View>
            ))}
        </ScrollView>
      );
    }
  }

const styles = StyleSheet.create({
  container: {
     paddingTop: Constants.statusBarHeight
  },
  text: {
    fontWeight: "bold",
    color: "#fff",
    textAlign: "center",
    fontSize: 28
},
view: {
    padding: 10,
    backgroundColor: "#018bbc"
  }
 });

以下是输出:

输出图像

推荐答案

修改render()方法,将ScrollView包装在View容器中,并将paddingTop设置为该View容器:

render() {
    return (
        <View style={ styles.container}>
            <ScrollView >
                {data.map(d => <View style={styles.view}><Text style={styles.text}>{d}</Text></View>)}
            </ScrollView>
        </View>
    );
}

React-native相关问答推荐

ITMS—91053:缺少API声明—ReactNative

React Native 无法下载模板

自定义单选按钮在react native 中不起作用

RTK 查询显示互联网何时关闭?

如何在 react-navigation v6 中更改标题高度

如何解决Readonly<{}> 类型上不存在属性 navigation&

react-native StyleSheet 属性和选项列表

TypeError:undefined is not an object(判断'navigator.geolocation.requestAuthorization')

React-Native iOS - 如何通过按下按钮从 React-Native 视图导航到非 React-Native 视图(本机 iOS 视图控制器)?

如何从 React Native-App 中的 res/drawable-folder 加载图像?

使用 React Navigation 制作离开屏幕的动画

Xcode 设备不可用,未找到运行时配置文件

props验证中缺少 React Navigation 'navigation'

React-Native:FlatList onRefresh not called on pull up.

如何在 Text ReactNative 中包含 TouchableOpacity

如何将props传递给 React Navigation 导航器中的组件?

如何用 Realm 元素文件组织 React Native?

KeyboardAvoidingView - 隐藏键盘时重置高度

如何在react-native中绘制虚线边框样式

如何在 React Native 中禁用图像淡入效果?