web-dev-qa-db-ja.com

React-Native：パーセンテージ値のマージン

React Nativeプロジェクトのマージンスタイル属性にパーセンテージ値を使用しようとしていますが、Viewコンポーネントの1つの高さを減らしているようです。パーセンテージ値を絶対値で置き換えると、これ以上の問題はなく、正常に動作します。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: 1,
        flexDirection: 'column',
        justifyContent: 'center'
    }
});

どうもありがとうございました ！

cssreactjsreact-nativeflexboxreact-native-flexbox
7
Thomas Lupo

コンポーネントの高さと幅によって、画面上のサイズが決まります。

コンポーネントの寸法を設定する最も簡単な方法は、スタイルに固定幅と高さを追加することです。 React Nativeのすべての次元は単位がなく、密度に依存しないピクセルを表します。

この方法で寸法を設定することは、画面の寸法に関係なく、常にまったく同じサイズでレンダリングするコンポーネントに共通です。

コンポーネントのスタイルでflexを使用して、使用可能なスペースに基づいてコンポーネントを動的に伸縮させます。通常、flexを使用します.1。

次の参照はスタイリングに使用されます

  1. https://facebook.github.io/react-native/docs/height-and-width.html

  2. https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb

  3. https://facebook.github.io/react-native/docs/layout-props.html#paddingtop

    寸法を使用して計算し、画面の高さと幅を取得します。

    var {height, width} = Dimensions.get('window');

    画面サイズを取得してパーセンテージを指定し、パーセンテージに変換するには。

    サンプル例：

    const { height } = Dimensions.get('window');

paddingTop: height * 0.1 // 10 percentage of the screen height
9
Jeeva

これは本当のバグですが、Facebookは気にしません。

https://github.com/facebook/react-native/issues/19164

1
Joseph Garrone