使用 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;
这是它的样子:
最佳答案
您必须在您的ListView(或ScrollView)中设置automaticallyAdjustContentInsets={false}。详情在这里:
关于javascript - react-native-scrollable-tab-view 上的无形边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40079886/