javascript - react-native-scrollable-tab-view 上的无形边距

Question

使用 react-native-scrollable-tab-view 模块的 View 似乎有一个不可更改的边距。我似乎可以让我的代码适合嵌套在可滚动选项卡 View 组件内的 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;

这是它的样子:

Answer 1

您必须在您的ListView(或ScrollView)中设置automaticallyAdjustContentInsets={false}。详情在这里:

• > https://github.com/skv-headless/react-native-scrollable-tab-view/pull/174
• > https://github.com/facebook/react-native/issues/721
• > https://facebook.github.io/react-native/docs/scrollview.html#automaticallyadjustcontentinsets