Question

我正在尝试使用 React-Native 创建一个应用程序我正在处理的页面从Web服务器获取数据以填充列表。我正在尝试显示20个条目，其中包括图像和名称。我想在滚动视图中创建包含此信息的20个视图。当我在滚动视图中放置一个视图时，它会消失。我无法弄清楚滚动视图的确切工作方式，有人可以解释一下这是如何完成的吗？

代码：

<View style={commonStyle.container}>

{/* Scrollable View */}
<ScrollView style={toysListStyle.MainContent}>

  <View style={toysListStyle.ToyEntry}>
    <Image resizeMode="contain" style={toysListStyle.ToyPicture}
        source={{uri: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png'}}></Image>
    <View style={toysListStyle.ToyNameView}>
      <Text>Name</Text>
    </View>
  </View>

</ScrollView>

</View>


const toysListStyle = StyleSheet.create({
    MainContent: {
        position: "absolute",
        left: "0%",
        top: "33.5%",
        width: "100%",
        height: "60.5%",
        backgroundColor: "rgba(0,0,0,0.05)",
        flex: 1
    },
    ToyEntry: {
        position: "absolute",
        width: "100%",
        height: "25%",
        backgroundColor: "red",
        flex: 1
   },
   ToyPicture: {
        position: "absolute",
        top: "5%",
        left: "5%",
        height: "90%",
        width: "60%"
   },
   ToyNameView: {
        position: "absolute",
        top: "
        right: "
        height: "100%",
        width: "
        justifyContent: '
        alignItems: 'center'
   }
});

const commonStyle = StyleSheet.create({
    container: {
        position: "absolute",
        bottom: 0,
        left: 0,
        height: windowHeight,
        width: "100%",
        backgroundColor: "white", 
        justifyContent: 'center',
        alignItems: 'center',
},

我遗漏了整个页面的信息，因为有很多，但这是我遇到问题的地方。如果我将ScrollView更改为View，则View里面会显示，但是在ScrollView中它不会出现。我错过了什么？

Answer 1

你做的一切都正确但......

  ToyEntry: {
        position: "absolute",
        width: "100%",
        height: "25%",// This will work if parent contain fixed height like device height or in points and it will divide those value in that ratio...
        backgroundColor: "red",
        flex: 1
   }

因此，您可以为ToyEntry添加固定高度，或者您可以添加固定高度它的父母......

Answer 2

我能够在ScrollView样式中查看内容，ToyEntry样式略有变化，只需将height添加到绝对值而不是%

ToyEntry: {
  position: "absolute",
  width: "100%",
  height: 250,
  backgroundColor: "red",
  flex: 1
}

此外，由于某种原因，您共享的图片未显示，因此我也更改了图片链接以查看结果

<Image resizeMode="contain" style={styles.ToyPicture}
       source={{uri: 'https://unsplash.it/400/400?image=1'}}
/>

React Native可以将视图与其他元素放在ScrollView中

2 个答案: