本文介绍了显示:React Native中的内联等价的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
似乎我在创建显示时遇到问题:内联样式与flexbox等效。到目前为止,我已经实现了以下(其中红色和蓝色线由边界函数管理,以帮助造型):
使用此代码:
var React = require ('react-native');
var {
View,
ScrollView,
Image,
StyleSheet,
Text,
TouchableHighlight,
} = React;
//附加库
var Parse = require('parse / react-native'); //解析数据存储
Icon = require('react-native-vector-icons / Ionicons'); // vector icons
// dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
//动态变量组件
var ImageButton = require('../ common / imageButton');
// var KeywordBox = require('./ onboarding / keyword-box');
module.exports = React.createClass({
render:function(){
return(
< View style = {[styles.container]}> ;
< Image
style = {styles.bg}
source = {require('./ img / login_bg1_3x.png')}>
< View style = {[styles.header,this.border('red')]}>
< View style = {[styles.headerWrapper]}>
< Image
resizeMode = { 'contain'}
style = {[styles.onboardMsg]}
source = {require('./ img / onboard_msg.png')}>
< / Image>
< / View>
< / View>
< View style = {[styles.footer,this.border('blue')]}>
&
horizontal = {false}
style = {styles.footerWrapperNC}
contentContainerStyle = {[styles.footerWrapper]}>
{this.renderKeywordBoxes()}
< / ScrollView>
< / View>
< / Image>
< / View>
);
},
renderKeywordBoxes:function(){
//在keyword.js中呈现关键字数组
//并将它们映射到自定义组件关键字框中以在入职时显示
// component
var关键字= ['LGBQT','#BlackLivesMatter','艺术','嘻哈','历史',
'政治','喜剧','时尚','创业','技术','商业',
'国际','健康','趋势','音乐','运动','entertianment'
return关键字.map(function(keyword,i){
return< TouchableHighlight
style = {styles.keywordBox}
key = {i}
underlayColor = {'rgb(176,224,230,0.6)'}>
< Text style = {styles.keywordText}> {keyword}< / Text>
< / TouchableHighlight>
});
},
//帮助布局flexbox itmes的函数
//使用颜色参数来构造边框,这是一个额外的
//风格,因为我们不想弄乱我们真正的造型
border:function(color){
return {
borderColor:color,
borderWidth:4,
}
},
});
styles = StyleSheet.create({
header:{
flex:2,
},
headerWrapper:{
flex:1 ,
flexDirection:'column',
alignItems:'center',
justifyContent:'space-around',
marginTop:window.height / 35,
} ,
onboardMsg:{
width:(window.width / 1.3),
height:(452/1287)*((window.width / 1.3)),
}
footer:{
flex:7,
marginTop:window.height / 35,
},
// scrollview的容器样式包装
footerWrapper: {
flexWrap:'wrap',
alignItems:'flex-start',
},
// scrollview的非容器样式封装器
footerWrapperNC:{
flexDirection:'row',
},
container:{
flex:1,
alignItems:'center',
justifyContent: 'center',
},
bg:{
flex:1,
width:window.width,
height:window.height,
} ,
actionButtonIcon:{
fontSize:20,
height:22,
color:'white',
},
keywordText:{
fontFamily:'Bebas Neue',
fontSize:18,
padding:6,
fontWeight:'bold',
color:'white',
letterSpacing: 1.5,
textAlign:'center'
},
keywordBox:{
backgroundColor:'transparent',
margin:3,
borderColor:'rgb (176,224,230,0.6)',
borderWidth:1,
},
});
但我想实现:
任何想法?
解答:
需要将样式更改为以下内容:
// scrollview的容器样式封装器
/ pre>
footerWrapper:{
flexWrap:'wrap',
alignItems:'flex-start',
flexDirection:'row',
},
// scrollview的非容器样式封装器
footerWrapperNC:{
flexDirection:'column',
},
因此,在scrollView中使用flexDirection在column和row中可以让孩子留在内部
解决方案需要将样式更改为以下样式:
// scrollview的容器样式包装
footerWrapper:{
flexWrap:'wrap',
alignItems:'flex-start',
flexDirection:'row',
},
//非容器scrollview的样式封装器
footerWrapperNC:{
flexDirection:'column',
},
It seems as though I am having problems with creating a display: inline styling equivalent with flexbox. So far I have achieved the following (where the red and blue lines are governed by the border function to help with styling):
With this code:
var React = require('react-native'); var { View, ScrollView, Image, StyleSheet, Text, TouchableHighlight, } = React; //additional libraries var Parse = require('parse/react-native'); //parse for data storage Icon = require('react-native-vector-icons/Ionicons'); //vector icons //dimensions var Dimensions = require('Dimensions'); var window = Dimensions.get('window'); //dynamic variable components var ImageButton = require('../common/imageButton'); //var KeywordBox = require('./onboarding/keyword-box'); module.exports = React.createClass({ render: function() { return ( <View style={[styles.container]}> <Image style={styles.bg} source={require('./img/login_bg1_3x.png')}> <View style={[styles.header, this.border('red')]}> <View style={[styles.headerWrapper]} > <Image resizeMode={'contain'} style={[styles.onboardMsg]} source={require('./img/onboard_msg.png')} > </Image> </View> </View> <View style={[styles.footer, this.border('blue')]}> <ScrollView horizontal={false} style={styles.footerWrapperNC} contentContainerStyle={[styles.footerWrapper]}> {this.renderKeywordBoxes()} </ScrollView> </View> </Image> </View> ); }, renderKeywordBoxes: function() { //renders array of keywords in keyword.js //and maps them onto custom component keywordbox to show in the onboarding //component var Keywords = ['LGBQT', '#BlackLivesMatter', 'Arts', 'Hip-Hop', 'History', 'Politics', 'Comedy', 'Fashion', 'Entrepreneurship', 'Technology', 'Business', 'International', 'Health', 'Trending', 'Music', 'Sports', 'Entertianment']; return Keywords.map(function(keyword, i) { return <TouchableHighlight style={styles.keywordBox} key={i} underlayColor={'rgb(176,224,230, 0.6)'} > <Text style={styles.keywordText} >{keyword}</Text> </TouchableHighlight> }); }, //function that helps with laying out flexbox itmes //takes a color argument to construct border, this is an additional //style because we dont want to mess up our real styling border: function(color) { return { borderColor: color, borderWidth: 4, } }, }); styles = StyleSheet.create({ header: { flex: 2, }, headerWrapper: { flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent:'space-around', marginTop: window.height/35, }, onboardMsg: { width: (window.width/1.3), height: (452/1287)*((window.width/1.3)), }, footer: { flex: 7, marginTop: window.height/35, }, //container style wrapper for scrollview footerWrapper: { flexWrap: 'wrap', alignItems: 'flex-start', }, //non-container style wrapper for scrollview footerWrapperNC: { flexDirection:'row', }, container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, bg: { flex: 1, width: window.width, height: window.height, }, actionButtonIcon: { fontSize: 20, height: 22, color: 'white', }, keywordText: { fontFamily: 'Bebas Neue', fontSize: 18, padding: 6, fontWeight: 'bold', color: 'white', letterSpacing: 1.5, textAlign: 'center' }, keywordBox: { backgroundColor: 'transparent', margin: 3, borderColor: 'rgb(176,224,230, 0.6)', borderWidth: 1, }, });
But I would like to achieve this:
any ideas?
EDIT** ANSWER:
Needed to change the styling to the following:
//container style wrapper for scrollview footerWrapper: { flexWrap: 'wrap', alignItems: 'flex-start', flexDirection:'row', }, //non-container style wrapper for scrollview footerWrapperNC: { flexDirection:'column', },
So use of flexDirection in column and row for scrollView works children stay inline
解决方案Needed to change the styling to the following:
//container style wrapper for scrollview footerWrapper: { flexWrap: 'wrap', alignItems: 'flex-start', flexDirection:'row', }, //non-container style wrapper for scrollview footerWrapperNC: { flexDirection:'column', },
这篇关于显示:React Native中的内联等价的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!