居中文本上方的矢量图标上方React本地

我正在尝试在矢量图标（显示7日历图标上方显示7）上居中显示一个文本，我正在使用react-native-vector-icon，绝对，但没有运气，直到现在居中文本上方的矢量图标上方React本地

<View style={{alignItems: 'center', alignSelf: 'center', justifyContent: 'center'}}> 
    <Icon name='ios-calendar-outline' style={styles.iconStyle}/> 
    <Text style={{position: 'absolute', alignItems: 'center', alignSelf: 'center', justifyContent: 'center'}}></Text> 
</View>

是否有可能做这样的事情？

来源

2017-04-27 Ahmed Ali

这些引用可能会或可能不会有所帮助： https://www.theodo.fr/blog/2017/04/react-native-layout-tricks/， https://facebook.github.io/react-native /docs/flexbox.html#layout-with-flexbox –

Icon组件react-native-vector-icon构建在Text组件之上。从Text组件的container部分，我们有：一个内 元素不再是矩形，但是当他们看到线结束包裹。因此，当您在一个View中添加Icon和Text组件时，它们将添加为一个text组件。这是一个好主意，添加View包装他们中的至少一个：

<View style={{alignItems: 'center', justifyContent:'center'}}> 
    <Text style={{ alignItems: 'center', justifyContent: 'center', backgroundColor:'blue'}}>test1</Text> 
    <View> 
     <Icon name='ios-calendar-outline' style={{backgroundColor:'red'}}/> 
    </View> 
</View>

更新：

你可以看到它在我测试这个on the simulator and pasted screensho吨Expo

来源

2017-04-27 11:00:09

这不起作用:( –

他们不居中？ –

不，他们不是。 –

。

更换<Image>与<Icon>，敷在<View>

import React, { Component } from 'react'; 
import { AppRegistry, Image, Text, View } from 'react-native'; 

class AlignItemsBasics extends Component { 
    render() { 
    return (
     // Try setting `alignItems` to 'flex-start' 
     // Try setting `justifyContent` to `flex-end`. 
     // Try setting `flexDirection` to `row`. 
     <View style={{ 
     flex: 1, 
     flexDirection: 'column', 
     justifyContent: 'center', 
     alignItems: 'center', 
     }}> 
     <Text>Put Icon inside a View</Text> 
     <View> 
      <Image 
      style={{width: 50, height: 50}} 
      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} 
      /> 
     </View> 
     </View> 
    ); 
    } 
}; 

AppRegistry.registerComponent('AwesomeProject',() => AlignItemsBasics);

您可以编辑代码，并在这里测试一下：

https://facebook.github.io/react-native/docs/flexbox.html#layout-with-flexbox

很酷。我不知道Facebook文档代码示例基本上是实时模拟器！您可以编辑代码并添加组件。

这些引用可能会或可能不会有所帮助：

来源

2017-04-27 15:58:42

居中文本上方的矢量图标上方React本地

回答

相关问题