将文本与图像对齐 - React Native答案

【问题标题】：Align text to image - React Native将文本与图像对齐 - React Native
【发布时间】：2016-08-15 16:12:46
【问题描述】：

我正在尝试像这样对齐每个图像下的社交图标文本：

但是，我得到了这些结果：

我将每一行作为一个单独的视图放置

<View style={styles.socialIcons}>
    <Image source={require("social/facebook-icon.png")} />
    <Image source={require("social/twitter-icon.png")} />
    <Image source={require("social/mail-icon.png")} />
    <Image source={require("social/message-icon.png")} />
</View>
<View style={styles.socialIconsText}>
    <Text style={styles.socialIconText}>Facebook</Text>
    <Text style={styles.socialIconText}>Twitter</Text>
    <Text style={styles.socialIconText}>Email</Text>
    <Text style={styles.socialIconText}>Message</Text>
</View>

按照他们的风格：

socialIcons: {
    alignItems: 'center',
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between',
    paddingLeft: 40,
    paddingRight: 40,
},
socialIconsText: {
    backgroundColor: 'transparent',
    alignItems: 'center',
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between',
    paddingLeft: 40,
    paddingRight: 40,
},

我认为我应该做的是将文本放在图像标签内，但是当我这样做时，图像高度会切断它下面的任何文本。有没有办法获得图像高度并增加样式的高度？

或者有没有更好的方法来对齐图像下方的文本？

【问题讨论】：

标签： css image react-native

【解决方案1】：

我认为填充会干扰文本。

还尝试使每个图像和文本元素的宽度为 25% + box-sizing: border-box;和中心文本。

【讨论】：

【解决方案2】：

而不是将 facebook、twitter 的图像和文本分开......在特殊的视图中覆盖它们是更好的主意。通过这种方式，您可以更好地控制视图，并且可以进行动态实现。

<View style = {{flex:1}}>
 <View style={{height:80, width:80}}> 
  <Image style ={{flex:1}}>
   ... 
  </Image>
  <Text style={{flex:1}}>
  </Text>
 </View> 
 .
 .
 .
</View>

创建返回特殊视图的函数将使您免于重复代码。

getSpecView(uri,text)//使用这个参数来指定你的图像和文本 { 返回（ ... ); } 而现在你要做的就是调用这个函数

 <View style = {{flex:1}}>
     getSpecView(*faceuri, *facetext)
     getSpecView(*twitter, *twittertext)
     .
     .
    </View>

你甚至可以通过创建一个 Json 数组并调用 map 函数来摆脱为每对夫妇多次调用这个函数

couples = [{ name:'facebook', uri:'faceuri'  }, { name:'twitter', uri:'twitter uri'}]

现在你只有三行代码 + 一个函数和一个 json 数组。

      <View style = {{flex:1}}>
        couples.map(this.getSpecView(name,uri))// not sure about syntax
        </View>

如果您在处理图像时遇到问题，可以使用 resizeModes resizeMode PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) https://facebook.github.io/react-native/docs/image.html

【讨论】：