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

Question

我想在页面底部添加更多信息并修复此底部卡片部分 page.But 滚动时我想查看我想在底部添加的其他信息，这只会在 scrolling.How 之后显示，我可以这样做吗？

我现在有这个代码：

 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 在某种程度上不是 working.Any 帮助 appreciated.Thanks。

Answer 1

试试下面的方法

将 JobInfo 添加到 Scrollview 中。并从 mapContainer

中移除高度属性

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

而mapContainer是

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

使用flex值调整地图的高度

Edit 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

Fixing an element size and adding ScrollView on that

android

scrollview

ios

react-native