显示：React Native中的内联等价 [英] Display: Inline Equivalent in React Native
本文介绍了显示：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中的内联等价的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
