Question

我目前有一个滚动视图，正在集成到另一个视图中。
当我运行当前代码时，我的滚动视图将停留在特定位置。显然有样式，但是我不确定我在做什么错。

父组件是这样的：

  <Root>
  <Container>
      <Header>
      <Text>{this.state.narrative.name}</Text>
      </Header>
          <Content>
            <Form>
              <View>
              <ListItem>
                <CheckBox checked={false}/>
                <Body>
                  <Text style={styles.bodyTextOptions}>Defect</Text>
                </Body>
              </ListItem>
              </View>
            </Form>
            {this.narrativePictures()}
          </Content>
        {captures.length > 0 && <Gallery captures={captures}/>}
        </Container>
        </Root>

我正在谈论的滚动视图是这样的：

{captures.length > 0 && <Gallery captures={captures}/>}

该组件的代码如下：

  <ScrollView
      horizontal={true}
      style={[styles.bottomToolbar, styles.galleryContainer]}
  >
      {captures.map(({ uri }) => (
          <View style={styles.galleryImageContainer} key={uri}>
              <Image source={{ uri }} style={styles.galleryImage} />
          </View>
      ))}
  </ScrollView>

ScrollView组件的样式是这样：

    bottomToolbar: {
         width: winWidth,
         position: 'absolute',
         height: 100,
         bottom: 0,
     },
     galleryContainer: {
    bottom: 100
},
galleryImageContainer: {
    width: 75,
    height: 75,
    marginRight: 5
},
galleryImage: {
    width: 75,
    height: 75
},

这是在模拟器上显示的滚动视图：

两个黑框是滚动视图上的图像。滚动视图的后面是实际组件。我希望滚动视图作为组件的一部分而不是在其顶部浮动。

我玩过代码，似乎无法正确处理。我将绝对更改为相对，什么也没有：

bottomToolbar: {
         width: winWidth,
         position: 'relative',
         height: 100,
         bottom: 0,
     },

有什么办法可以解决这个问题吗？

React Native视图样式未按预期出现

0 个答案: