Javascript 本机可滚动选项卡视图上的不可见边距

使用react native scrollable tab view模块的视图上似乎有一个不可更改的边距。我似乎可以让我的代码适合嵌套在可滚动选项卡视图组件中的视图页面。有什么想法吗？以下是显示页面的代码：

'use strict';

import React from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TextInput
} from 'react-native';

//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
//modules/pages
var StepImage = require('../components/StepImage');
import Icon from 'react-native-vector-icons/FontAwesome';
import {Actions} from "react-native-router-flux";
var NavHeader = require('../components/Header');
var UserStat = require('../components/UserStat');
var UserCircle = require('../components/UserCircle');
var Button = require('../components/Button');
var Data = require('../stores/userDiets');
var NavigationBar = require('react-native-navbar');


var Profile = React.createClass({

  getInitialState: function() {
    return {
    };
  },

  render: function() {
    var Keywords = Data.diets;
    return (
      <View style={[styles.container]}>
        <NavigationBar
          style={{width: window.width}}
          tintColor={'#50AE57'}
          title={{title: 'Robert Greenfield', tintColor: 'white', style: {fontFamily: 'Nunito', fontSize: 18}}} />
        <View style={[styles.header, this.border('red')]}>
          <View style={[styles.userrow, this.border('red')]}>
            <UserCircle source={require('../img/user/user.jpg')} style={styles.circle}/>
            <View style={[styles.userinfo, this.border('orange')]}>
              <View style={[styles.userstats, this.border('blue')]}>
                <UserStat stat={3333} statTitle={'posts'} />
                <UserStat stat={8888} statTitle={'achievements'} />
                <UserStat stat={112} statTitle={'following'} />
                <UserStat stat={'550K+'} statTitle={'followers'} />
              </View>
              <Icon.Button size={12} name="cogs" style={styles.edit} backgroundColor="#F4F4F4" onPress={this.loginWithFacebook}>
                <Text style={styles.editText}>Edit Profile</Text>
              </Icon.Button>
            </View>
          </View>
          <View style={[styles.userBio, this.border('blue')]}>
            <Text style={styles.userBioText}>The biggest #nutfree IG in the world. tag @nutfreenoms or #nomsy. To be featured, make an account at nomsy.co and post what you want shown! nomsy.co</Text>
          </View>
          <View style={styles.dietRow}>
            {this.renderDiets(Keywords)}
          </View>
        </View>
      </View>
    );
  },

  renderDiets: function(diets) {
         var that = this;

        return diets.map(function(diet, i) {

            return <View key={i} style={styles.box}><Text key={i} style={styles.userBioText}>{diet.name}</Text></View>
        });
    },

  border: function(color) {
      return {
        //borderColor: color,
        //borderWidth: 1,
      }
  }

});

var styles = StyleSheet.create({
  box: {
    margin: 2,
    backgroundColor: '#56bf60',
    borderRadius:2,
    height: window.height/35,
    padding: 3,
    justifyContent: 'center'
  },
  dietRow:{
    flexWrap: 'wrap',
        flexDirection:'row',
    height: window.height/20,
    marginLeft: window.width/40,
    width: window.width*0.96,
  },
  userBio: {
    width: window.width*0.96,
    alignItems: 'center',
    marginLeft: window.width/80,
    marginBottom: window.height/100
  },
  userBioText: {
    color: 'black',
    fontFamily: 'Nunito',
    fontSize: 10
  },
  editText: {
    color: 'white',
    fontFamily: 'Nunito',
    alignSelf: 'center'
  },
  edit: {
    height: window.height/25,
    justifyContent: 'center',
    alignItems: 'center'
  },
  circle: {
    width: window.width/5,
    height: window.width/5,
    borderRadius: window.width/10
  },
  userstats: {
    flexDirection: 'row',
    backgroundColor: 'white',
    justifyContent: 'space-around',
    marginBottom: window.height/100
  },
  userinfo: {
    flexDirection: 'column',
    backgroundColor: 'transparent',
    width: window.width/1.4
  },
  userrow: {
    flexDirection: 'row',
    backgroundColor: 'transparent',
    height: window.height/8,
    justifyContent: 'space-around',
    width: window.width
  },
  header: {
    marginTop: window.height/50,
    width: window.width,
    flex: 0.9,
    backgroundColor: 'white',
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
});

module.exports = Profile;

“严格使用”；
从“React”导入React；
进口{
样式表，
看法
形象,，
文本，
文本输入框
}从“反应本机”；
//尺寸
变量维度=要求（“维度”）；
var window=Dimensions.get（'window'）；
//模块/页面
var StepImage=require（'../components/StepImage'）；
从“反应本机矢量图标/FontAwesome”导入图标；
从“react native router flux”导入{Actions}；
var NavHeader=require（'../components/Header'）；
var UserStat=require（'../components/UserStat'）；
var UserCircle=require（'../components/UserCircle'）；
var Button=require（'../components/Button'）；
var Data=require（'../stores/userDiets'）；
var NavigationBar=require（'react-native-navbar'）；
var Profile=React.createClass({
getInitialState:函数（）{
返回{
};
},
render:function（）{
var关键词=数据。饮食；
返回(
编辑配置文件
世界上最大的nutfree IG。标记为@nutfreenoms或#nomsy。要成为特色，请在nomsy.co上创建一个帐户，并发布您想要显示的内容！nomsy.co
{this.renderItems（关键字）}
);
},
渲染集：功能（饮食）{
var=这个；
返回饮食图（功能（饮食，i）{
返回{diet.name}
});
},
边框：功能（颜色）{
返回{
//边框颜色：颜色，
//边框宽度：1，
}
}
});
var styles=StyleSheet.create({
方框：{
差额：2，
背景颜色：“#56bf60”，
边界半径：2，
高度：window.height/35，
填充：3，
为内容辩护：“中心”
},
迪特罗：{
flexWrap:“wrap”，
flexDirection:“行”，
高度：window.height/20，
marginLeft:window.width/40，
宽度：窗宽*0.96，
},
用户生物：{
宽度：窗宽*0.96，
对齐项目：“居中”，
marginLeft:window.width/80，
边缘底部：窗高/100
},
用户生物文本：{
颜色：'黑色'，
fontFamily：“努尼托”，
字体大小：10
},
编辑文本：{
颜色：'白色'，
fontFamily：“努尼托”，
自我定位：“中心”
},
编辑：{
高度：window.height/25，
为内容辩护：“中心”，
对齐项目：“中心”
},
圆圈：{
宽度：window.width/5，
高度：窗宽/5，
边框半径：窗宽/10
},
用户统计：{
flexDirection:'行'，
背景颜色：“白色”，
为内容辩护：“周围的空间”，
边缘底部：窗高/100
},
用户信息：{
flexDirection:'列'，
背景色：“透明”，
宽度：窗宽/1.4
},
用户行：{
flexDirection:'行'，
背景色：“透明”，
高度：window.height/8，
为内容辩护：“周围的空间”，
宽度：window.width
},
标题：{
marginTop:window.height/50，
宽度：window.width，
弹性系数：0.9，
背景颜色：“白色”，
},
容器：{
弹性：1，
对齐项目：“居中”，
justifyContent:“flex start”，
},
});
module.exports=配置文件；

下面是它的样子：

---

您必须在

列表视图

（或

滚动视图

）中设置

自动调整内容insets={false}

。详情如下：

---

不幸的是，当我将属性放在控制此视图的组件中时，这对我不起作用确定了问题！除了您的解决方案之外，还添加了样式填充-谢谢！