如何在反应原生的两个 div 顶部获得圆形图像标签？答案

【问题标题】：How to get rounded image tag on top of two div in react native?如何在反应原生的两个 div 顶部获得圆形图像标签？
【发布时间】：2019-07-23 16:16:57
【问题描述】：

我想创建一个个人资料页面，其中圆形图像将以 30:70 的比例位于两个 div 的顶部，其中顶部 div 将为空，底部 div 将包含少量项目。我尝试了一些来自网络的代码 sn-ps。

<View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'green', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
        <View style={{ flexDirection: 'column', justifyContent: "flex-start", alignItems: "flex-start", alignSelf: "flex-start" }}>
            {/* <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-end', alignSelf: 'flex-start', margin: 1 }}> */}
                <View style={{ backgroundColor: 'white', borderRadius: 10, flexDirection: 'column', height: "30%", width: "100%" }}></View>
            {/* </View> */}
            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-start', alignSelf: 'flex-start', margin: 1 }}>
                <View style={{ backgroundColor: 'white', borderRadius: 10, flexDirection: 'column', height: "70%", width: "100%" }}></View>
            </View>
        </View>

        <View style={{ justifyContent: 'center', alignItems: 'center', alignSelf: 'center', position: 'absolute' }}>
            <View style={{
                backgroundColor: 'blue',
                borderRadius: 10, height: 100, width: 100, borderRadius: 100 / 2
            }}></View>
        </View>
    </View>

reference image

【问题讨论】：

我们需要输出 HTML 和 CSS——而不是你的反应代码。理想情况下在堆栈片段中。
适用于 React Native 还是 web？
@ash 检查我的回复，看看它是否适合你

标签： css react-native

【解决方案1】：

以您与我们分享的图像作为参考...您可以有两个视图并将个人资料头像样式设置为：

{
  position: 'absolute',
  alignSelf: 'center',
  etc..
}

查看快速演示：https://snack.expo.io/@abranhe/avatar-example

App.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, ImageBackground, Image } from 'react-native';
import { Ionicons, FontAwesome } from '@expo/vector-icons';

import Constants from 'expo-constants';
import { avatar, background } from './data';

export default class App extends Component {
  renderRow({ action, icon, fontAwesome = false }) {
    return (
      <View style={styles.actionRow}>
        {fontAwesome 
          ? <FontAwesome name={icon} size={25} /> 
          : <Ionicons name={icon} size={32} />}
        <Text style={styles.text}>{action}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground source={background} style={styles.background}>
          <Image source={avatar} style={styles.avatar} />
        </ImageBackground>
        <View style={styles.content}>
          {this.renderRow({ action: 'Scanner', icon: 'ios-camera' })}
          {this.renderRow({
            action: 'Profile',
            icon: 'user-circle-o',
            fontAwesome: true,
          })}
        </View>
      </View>
    );
  }
}

你的风格：

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  background: {
    width: '100%',
    height: 130,
  },
  content: {
    flex: 1,
    marginTop: 80,
    marginHorizontal: 10,
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: '50%',
    borderWidth: 0.7,
    borderColor: 'black',
    position: 'absolute',
    alignSelf: 'center',
    marginTop: 80,
  },
  actionRow: {
    width: '100%',
    height: '50',
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10,
  },
  text: {
    marginLeft: 15,
    fontWeight: '500',
  },
});

【讨论】：