Question

我有一个滚动视图，我希望它能够在屏幕的某个部分滚动文本（屏幕的其余部分应该不能滚动）

但是，scrollview不会滚动，并且其中的文本会被剪切掉，并且大多数不会显示。当我删除滚动视图时，将显示全文。

的链接

Fyi，points变量包含大量文本

下面是我的代码：

import { StyleSheet, View, Text,FlatList, TouchableOpacity, ScrollView } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Lesson } from "../../App";

const data = require('../Data/MainData.json').mainData
 function Flashcards({route, navigation}) {

 let index = []
 let counter = 0
 let points = ""
 const { PrimaryType } = route.params.params;
 const {TopicName} = route.params.params;
 const {Elements} = route.params.params;
 const {Chapter} = route.params.params;
 // setting up variables...
for (var i = 0; i <= Elements.length-1; i++){
 if (data[Elements[i]].topic.toLowerCase() == Chapter.toLowerCase()){
 index.push(Elements[i])
      }
    }

 for (var i = 1; i <= 20; i++){
 if (data[index[counter]][`point${i}`] != "Empty Cell"){
 points += `${data[index[counter]][`point${i}`]}\n\n`
      }
 
 
    }

 return (
// un-scrollable section
 <View style = {styles.container}> // UI starts here
 <View style={styles.rect1Stack}>
 <View style={styles.rect1}>
 <Text style={styles.lowerPrimary}>{PrimaryType}</Text>
 <Text style={styles.syllabus}>Primary School {TopicName}</Text>
 </View>
 <View style={styles.rect2}></View>
 </View>

// scrollable text section
<ScrollView style = {styles.ScrollView}>
 <Text style={styles.conceptName}>{data[index[counter]].concepts}</Text>

 <Text style={styles.info}>{points}</Text>

 </ScrollView>

 

 </View>
    );
  }
 
 const styles = StyleSheet.create({
 container: {
 flex: 1
    },
 rect1: {
 top: 0,
 height: 207,
 position: "absolute",
 backgroundColor: "rgba(247,142,105,1)",
 
 left: 3,
 right: 4
    },
 lowerPrimary: {
 fontFamily: "roboto-700",
 color: "rgba(255,255,255,1)",
 fontSize: 26,
 height: 88,
 width: 286,
 marginTop: 30,
 marginLeft: 20
    },
 rect2: {
 top: 148,
 left: 0,
 height: 83,
 position: "absolute",
 backgroundColor: "rgba(255,255,255,1)",
 borderRadius: 43,
 right: 0
    },
 rect1Stack: {
 height: 231,
 marginLeft: -3,
 marginRight: -4
    },
 
 syllabus: {
 fontFamily: "roboto-700",
 color: "rgba(255,255,255,1)",
 fontSize: 20,
 height: 35,
 width: 286,
 marginTop: -30,
 marginLeft: 20
    },

 yellowrec: { //unused property
 height: 400,
 backgroundColor: "rgba(255,231,185,1)",
 marginTop: 0,
 marginLeft: 20,
 marginRight: 10
      },
 conceptName: {
 fontFamily: "roboto-regular",
 color: "#121212",
 fontSize: 18,
 height: 80,
 marginTop: 10,
 textAlign: "center",
 marginLeft: 0,
 marginRight: 0,
 alignSelf: "center"
 
      },
 info: {
 
 position: "absolute",
 fontFamily: "roboto-regular",
 color: "#121212",
 top: 50,
 left: 5,
 width: 360,
 fontSize: 18,
 marginLeft: 10,
      },

 ScrollView: {
 top: 0,
 left: 0,
 marginRight: 10,
 height: 7000,
 marginLeft: 10,
 backgroundColor: "rgba(255,231,185,1)"
   }
 
  });

export default Flashcards;```

Answer 1

您可以使用flex将屏幕拆分为两个例如：

container: {
    flex: 1,
  },
  rect1Stack:{
    flex:.4,
    backgroundColor:'green',
  },
  scrollView:{
    flex:.6,
    backgroundColor:'blue'
  },

Android scrollview不会滚动并切断文本

1 个答案: