Javascript 在react native中以hr为中心的图标

我想设计一条水平线，上面有一个图标，比如，但是在react native中。朝以下方向发展的事物：

<View style={{}}>
  <View style={{}}>
  <Image style={{}} source={}/>
</View>

我该怎么做呢？

试试这段代码

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

export default class App extends Component {
  render() {
    return (
      <View style={{ paddingTop: 100, alignItems: 'center' }}>
        <View style={{ borderBottomColor: '#bdbdbd', borderBottomWidth: 1, width: '90%' }} />
        <View style={{ position: 'relative' }}>
          <Image
            style={styles.image}
            source={{
              uri: 'http://www.cgbconstrucciones.com/en/templates/rt_clarion/images/icons/green-leaf-icon.png',
            }}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    width: 40,
    height: 40,
    position: 'absolute',
    top: -20,
    left: -20,
    backgroundColor: '#fff'
  }
});

import React，{Component}来自'React'；
从“react native”导入{样式表、视图、图像}；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
图片：{
宽度：40，
身高：40，
位置：'绝对'，
前-20名，
左：-20，
背景颜色：“#fff”
}
});

在这里查看演示

一种方法是给孩子的

视图

一个水平边框（

borderBottom

或

borderTop

），并放置

位置：“绝对”

，在

图像

@Sventies上加上一些边距。我还添加了一个实时演示，以供参考

<View style={{flexDirection: 'row', alignItems: 'center'}}>
      <View style={{flex: 1, borderBottomColor: '#bdbdbd', borderBottomWidth: 1}} />
      <Image style={{width: 40, height: 40}}
        source={{
          uri: 'http://www.cgbconstrucciones.com/en/templates/rt_clarion/images/icons/green-leaf-icon.png',
        }}/>
      <View style={{flex: 1, borderBottomColor: '#bdbdbd', borderBottomWidth: 1}} />
    </View>