Question

我正在尝试将文本置于矢量图标上方（在日历图标上显示7），我正在使用react-native-vector-icon，我尝试使用绝对位置但直到现在都没有运气

<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>

可以做这样的事吗？！

Answer 1

来自react-native-vector-icon组件顶部的Text

Icon组件。来自Text组件的container部分，我们有： a内部的元素不再是矩形，而是在看到行尾时换行。因此，当您在一个Icon中添加Text和View个组件时，他们会添加为一个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>

<强>更新

您可以在Expo

上看到它

Answer 2

我测试了这个on the simulator and pasted screensho t。

将<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的doc代码样本基本上是现场模拟器！您可以编辑代码并添加组件。

这些参考文献可能有用，也可能没用：

Answer 3

这是有效的，（只需添加'top:11'）

    <View
      style={{
        alignItems: "center",
        alignSelf: "center",
        justifyContent: "center",
      }}
    >
      <Icon
        name="certificate"
        size={50}
        type="font-awesome"
        color="black"
        containerStyle={{ marginBottom: 14 }}
      />
      <Text
        style={{
          position: "absolute",
          alignItems: "center",
          alignSelf: "center",
          justifyContent: "center",
          color: "white",
          top: 11,
        }}
      >
        1
      </Text>
    </View>

将文本居中在React本机上的矢量图标上方

3 个答案: