react-native - 如何在 react-native 中正确使用 flex？

问题描述

问题：

我创建了一个反应应用程序。在那里，我在我的应用程序中创建了一个页眉，该页眉对我的所有组件都是通用的，并且页眉的标题将相应更改。

此图像显示了我的代码的作用。

我想要达到的就是这个。

这是我的页面标题代码。

/* eslint-disable react-native/no-inline-styles */

import React, {Component} from 'react';

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

import LinearGradient from 'react-native-linear-gradient';

class PageHeader extends Component {
  render() {
    return (
      <View style={{zIndex: 0}}>
        <LinearGradient
          colors={['#fdc830', '#ff9a00']}
          style={{alignItems: 'center', borderBottomLeftRadius: 80}}>
          <View
            // eslint-disable-next-line react-native/no-inline-styles
            style={{
              flexDirection: 'row',
              marginTop: '10%',
              marginBottom: '5%',
              paddingTop: '5%',
            }}>
            <Text
              style={{
                fontSize: 18,
                fontWeight: 'bold',
                fontStyle: 'normal',
                fontFamily: 'sans-serif',
                letterSpacing: 0.81,
                color: '#000104',
                marginTop: '2%',
                marginLeft: this.props.marginLeft,
                marginRight: '2%',
              }}>
              {this.props.title}
            </Text>
            <Image
              style={{
                width: 20,
                height: 10,
                marginTop: this.props.marginTop,
              }}
              source={this.props.image}
            />
          </View>
        </LinearGradient>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    top: 0,
    flex: 3,
  },
  homeHeader: {
    flexDirection: 'column',
    flex: 1,
  },
  homeHeaderImage: {
    flexDirection: 'row',
  },
  headerText: {
    fontSize: 18,
    fontWeight: 'bold',
    fontStyle: 'normal',
    fontFamily: 'sans-serif',
    letterSpacing: 0.81,
    color: '#000104',
    marginTop: '2%',
    marginLeft: '30%',
    marginRight: '3%',
  },
  hederContentContainer: {
    flexDirection: 'row',
    marginTop: '30%',
    marginBottom: '10%',
  },
  qrCodeGeneraterContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  viewDetails: {
    color: '#ff9a00',
    fontSize: 12,
    marginLeft: '75%',
    fontWeight: 'bold',
    marginTop: '2%',
    marginBottom: '1%',
  },
});

export default PageHeader;

这就是我在我的家庭组件中使用这个组件的方式。

 <PageHeader
          title="Settings"
          image={require('../../../assets/settings.png')}
          width={DEVICE_WIDTH / 14}
          height={DEVICE_HEIGHT / 24}
          marginTop="2%"
          marginLeft="40%"
        />

我的代码有什么问题是它没有完全显示图像。我尝试了很多方法来获得完整的图像，但我无法做到。并且它在不同的设备尺寸上显示了不同的差异尺寸，因为我已经根据设备给出了宽度。有人可以帮我解决这两个问题吗？谢谢你。

标签： react-native

<Image style={{ width: 20, height: 20, marginTop: this.props.marginTop, resizeMode="contain" }} source={this.props.image} />

react-native - 如何在 react-native 中正确使用 flex？

问题描述

解决方案

推荐阅读