javascript - React Native 中以 hr 为中心的图标

Question

我想设计一条水平线，其顶部有一个图标，例如 this one ，但是在 native react 中。朝着以下方向的事情:

<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