Блог

Моя цель с помощью этого кода — отобразить текст при нажатии первой и второй кнопок, которые работают должным образом. Однако всякий раз, когда я нажимаю на второй, текст становится длиннее экрана, но я не могу прокрутить экран вниз: экран зафиксирован. Я провел некоторые исследования, но не могу найти никаких решений своей проблемы…

Есть идеи, как я могу решить проблему?

Зависимости:

 "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",
  }
});

  

Вы импортируете компонент Scrollview, но на самом деле никогда его не используете.

Попробуйте окружить свой вид Scrollview, например, таким:

     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>
    );