javascript - 无法在 react JS 中向下滚动屏幕

Question

我使用此代码的目标是在按下第一个和第二个按钮时显示文本，这按预期工作。
然而，每当我按下第二个时，文本比屏幕长，但我无法向下滚动:屏幕是固定的。我做了一些研究，但找不到任何解决我问题的方法......
有什么想法可以解决这个问题吗？
依赖项:

"dependencies": {
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/compat": "^5.2.5",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/material-top-tabs": "^5.2.16",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  LayoutAnimation,
} from "react-native";
export default class ViewPersonalNote extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: false,
      expanded2: false,
    };
  }
  changeLayout = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({ expanded: !this.state.expanded });
  };
  changeLayout2 = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({ expanded2: !this.state.expanded2 });
  };
  render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            position: "absolute",
            top: "50%",
            left: 20,
            right: 20,
            width: "92%",
            flexDirection: "column",
            borderBottomColor: "black",
            borderBottomWidth: 2,
          }}
        >
          <TouchableOpacity
            style={{
              width: "100%",
              height: "2em",
              borderBottomColor: "red",
              borderBottomWidth: 2,
            }}
            onPress={this.changeLayout}
          >
            <Text style={{ fontWeight: "bold", fontSize: 15 }}>First</Text>
          </TouchableOpacity>
          <View
            style={{
              height: this.state.expanded ? null : 0,
              overflow: "hidden",
              marginTop: "5%",
            }}
          >
            <Text style={{ fontSize: 17, color: "black" }}>
              The printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since
              the 1500s
            </Text>
          </View>
          <TouchableOpacity
            style={{
              width: "100%",
              height: "2em",
              borderBottomColor: "red",
              borderBottomWidth: 2,
            }}
            onPress={this.changeLayout2}
          >
            <Text style={{ fontWeight: "bold", fontSize: 15 }}>Second</Text>
          </TouchableOpacity>
          <View
            style={{
              height: this.state.expanded2 ? null : 0,
              overflow: "hidden",
              marginTop: "5%",
            }}
          >
            <Text
              style={{
                fontSize: 17,
                color: "black",
                textAlign: "center",
              }}
            >
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into
              electronic typesetting, remaining essentially unchanged. It was
              popularised in the 1960s with the release of Letraset sheets
              containing Lorem Ipsum passages, and more recently with desktop
              publishing software like Aldus PageMaker including versions of
              Lorem Ipsum.
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    // margin: 10,
    backgroundColor: "white",
  }
});

Answer 1

您导入了 Scrollview 组件，但实际上从未使用过它。
尝试使用 Scrollview 围绕您的 View ，例如:

    return (
      <ScrollView ref={scrollRef} >
        <View style={{height: '100px'}}>
            <Button onPress={() => handleClick(1) title="1"/>
        </View>
        <View style={{height: '100px'}}>
            <Button onPress={() => handleClick(4) title="4"/>
        </View>
        <View style={{height: '100px'}}>
            <Button onPress={() => handleClick(5) title="5"/>
        </View>
      </ScrollView>
    );