React native 在react native中设置viewpager的所有页面的样式

我正在学习react native，并尝试在

地图视图上创建
查看页面
。
我在expo下使用这些包：
react native maps
和
@react native community/viewpager

我的目标是让viewpager覆盖mapview，而不占用整个宽度。所以我在页面上添加了边距。这是我的密码：

import ViewPager from '@react-native-community/viewpager';
import * as React from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';

export default function TabTwoScreen() {
  return (
    <View style={styles.container}>
        <MapView style={styles.mapStyle} />
        <ViewPager style={styles.viewPager} initialPage={0}>
        <View style={styles.page} key="1">
          <Text>First page</Text>
          <Text>Swipe ➡️</Text>
        </View>
        <View style={styles.page} key="2">
          <Text>Second page</Text>
        </View>
        <View style={styles.page} key="3">
          <Text>Third page</Text>
        </View>
      </ViewPager>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mapStyle: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  viewPager: {
    position: 'absolute',
    zIndex: 999,
    height: 200,
    width: Dimensions.get('window').width,
    
  },
  page: {
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 15,
    margin: 40
  },
});

从“@react native community/ViewPager”导入ViewPager；
从“React”导入*作为React；
从“react native”导入{Dimensions，StyleSheet}；
从“react native maps”导入MapView；
从“../components/EditScreenInfo”导入EditScreenInfo；
从“../components/Themed”导入{Text，View}；
导出默认函数TabTwoScreen（）{
返回(
首页
刷卡➡️
第二页
第三页
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
地图样式：{
宽度：尺寸。获取（'窗口'）。宽度，
高度：尺寸。获取（“窗口”）。高度，
},
浏览页面：{
位置：'绝对'，
zIndex:999，
身高：200，
宽度：尺寸。获取（'窗口'）。宽度，
},
第页：{
为内容辩护：“中心”，
对齐项目：“居中”，
边界半径：15，
差额：40
},
});

当我启动应用程序时，它工作得很好，如以下屏幕截图所示：

但是，当我浏览到其他页面时，margin属性似乎丢失了：

那么，如何在滑块的所有页面上保持样式属性呢

提前感谢您的帮助