Question

我想在页面底部添加更多信息并修复此页面底部的卡片部分。但是在滚动时，我想查看我想在底部添加的其他信息，这些信息只会在滚动后显示我该怎么办？

我现在有以下代码：

 render(){
    return(
      <View style={styles.container}>
        <MapView style={styles.mapcontainer}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }} />
        <JobInfo/>
      </View>
    )
  }
}

const styles = StyleSheet.create ({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  mapcontainer: {
    flex: 1,
    width: width,
    height: height
  }
})

class JobInfo extends Component {
  render() {
    return (
      <View style={{width: '100%'}}>
        <Card>
          <CardItem >
            <Text>General Info:</Text>
          </CardItem>
          <CardItem >
            <Body>
              <Text>
                Click on any carditem
              </Text>
            </Body>
          </CardItem>
          <CardItem >
            <Text>Packaging Info:</Text>
          </CardItem>
            <CardItem >
                <Body>
                  <Text>
                    Click on any carditem
                  </Text>
                </Body>
          </CardItem>
          <CardItem >
              <Text>Manpower Info:</Text>
            </CardItem>
              <CardItem >
                  <Body>
                    <Text>
                      Click on any carditem
                    </Text>
                  </Body>
          </CardItem>
        </Card>
      </View>
    )
  }
}

ScrollView不能正常工作。任何帮助将不胜感激。

Answer 1

尝试以下方法

将JobInfo添加到Scrollview中。并从mapContainer

中删除高度道具

 <ScrollView style={[{flex:1} ,{ width: '100%'},  {justifyContent: 'flex-start'}]}>
    <JobInfo/>
    </ScrollView>

mapContainer是

    mapcontainer: {
    flex: 3,
    width: '100%',
  }

使用flex值来调整地图的高度

编辑1

如果要滚动所有容器（Map和JobInfo），则需要为Map设置特定的高度。将所有元素包装到单个ScrollView中，如下所示：

<ScrollView style={[{flex:1} ,  {justifyContent: 'flex-start'}]}>
     <View style={styles.container}>
        <MapView style={styles.mapcontainer}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }} />
        <JobInfo/>
      </View>
  </ScrollView>

样式如下

    const styles = StyleSheet.create ({
  container: {
     flex: 1,
  },
  mapcontainer: {
    width: '100%',
    height:600,
  }
})

固定元素大小并在其上添加ScrollView

1 个答案: