javascript - React Native 可以将 View 和其他元素放在 ScrollView 中吗

Question

我正在尝试使用React-Native创建一个应用程序，我正在处理的页面使用从网络服务器提供的数据来填充列表。我正在尝试显示 20 个条目，其中包括图像和名称。我想创建 20 个 View ，在可 ScrollView 中包含此信息。当我将 View 放入 ScrollView 内时，它就会消失。我无法弄清楚 ScrollView 到底是如何工作的，有人可以解释一下这是如何完成的吗？

代码:

<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

You did all things right but...

  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
   }

So you can add fixed height to ToyEntry or you can add fixed height to its parent...