React-Native-Scrollview切断内容

时间:2018-08-30 07:54:40

标签: javascript react-native scrollview

我正在将数据添加到从服务器响应中检索的滚动视图中。数据存储在状态变量中。我遇到的问题是,添加图像后,滚动视图在第一段末尾之前切断了我的内容。删除图像后,剩下的所有文本内容都适合滚动视图。我的代码如下:

Scrollview代码:

<ScrollView style={homeScreenStyle.container}>
        <Text allowFontScaling={false} style={homeScreenStyle.nameText}>{this.state.nameText}</Text>
        {/* <Text allowFontScaling={false} style={homeScreenStyle.memType}>{this.state.memType}</Text> */}
        <Text allowFontScaling={false} style={homeScreenStyle.memHome}>{this.state.HomePageArr[0]}</Text>
        <Image resizeMode="contain" style={homeScreenStyle.ToyLibImage} source={{uri: this.state.image1}}></Image>
        <Text allowFontScaling={false} style={homeScreenStyle.memHome}>{this.state.HomePageArr[2]}</Text>
        <Image resizeMode="contain" style={homeScreenStyle.ToyLibImage} source={{uri: this.state.image2}}></Image>
        <Text allowFontScaling={false} style={homeScreenStyle.memHome}>{this.state.HomePageArr[3]}</Text>
        <Image resizeMode="contain" style={homeScreenStyle.ToyLibImage} source={{uri: this.state.image3}}></Image>
        <Text allowFontScaling={false} style={homeScreenStyle.memHome}>{this.state.HomePageArr[4]}</Text>
        <Text allowFontScaling={false} style={homeScreenStyle.memHome}>{this.state.HomePageArr[5]}</Text>
        <Text allowFontScaling={false} style={homeScreenStyle.memHome}>{this.state.HomePageArr[6]}</Text>
        <Text allowFontScaling={false} style={homeScreenStyle.memHome}>{this.state.HomePageArr[7]}</Text>
</ScrollView>

Scrollview的样式:

container: {
    position: "absolute",
    top: "25.5%",
    left: "3%",
    width: "94%",
    height: "60%",
    backgroundColor: "rgba(0,0,0,1)",
    borderRadius:20,
},

“文字”元素的样式:

nameText: {
    fontSize: 45,
    color: "white",
    textAlign: "center",
},

memHome: {
    fontSize: 20,
    color: "white",
    textAlign: "center",
    position: "relative",
    left: "5%",
    width: "90%",
},

Image元素的样式:

ToyLibImage: {
    position: "relative",
    left: "5%",
    width: "90%",
    height: "40%",
},

0 个答案:

没有答案