小编Tho*_*upo的帖子

React-Native:带有百分比值的保证金

我正在尝试在我的React Native项目上为利润率样式属性使用百分比值,但这似乎降低了我的View组件之一的高度。如果我将百分比值替换为绝对值,就不会再有问题了,并且可以正常工作。您是否尝试在React Native中将百分比值用作边距?这是一些重现此问题的代码示例:

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.scene}>
        <View style={styles.card}>
          <View style={styles.container}>
            <Text>Hello World</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    scene: {
        backgroundColor: '#F9E8D5',
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        flexDirection: 'column'
    },
    card: {
        backgroundColor: '#E6D5C3',
        flex: 0.2,
        flexDirection: 'column',
        marginTop: '20%' // Replace by 20
    },
    container: {
        backgroundColor: '#FFFFFF',
        flex: …
Run Code Online (Sandbox Code Playgroud)

css flexbox reactjs react-native react-native-flexbox

7
推荐指数
1
解决办法
1万
查看次数