以hr为中心的图标反应原生

Question

我想设计一个水平线，上方有一个图标，如this one，但是反应原生。方向：

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

我该怎么做？

Answer 1

试试此代码

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'
  }
});

在这里查看演示https://snack.expo.io/@raajnadar/absolute-position

Answer 2

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