[解決済み] React Nativeでビューの幅を親の80%にする

質問

React Nativeでフォームを作成しています。 TextInput を画面幅の80%にしたいです。

HTMLと普通のCSSを使えば、これは簡単なことです。

input {
    display: block;
    width: 80%;
    margin: auto;
}

ただし、React Native は display プロパティ、パーセンテージ幅、自動マージンなどをサポートしていません。

では、代わりに何をすればいいのでしょうか？そこには この問題についてのいくつかの議論 がありますが、提案されている解決策は厄介なハックのように見えます。

どのように解決するのですか?

React Native 0.42時点では height: と width: はパーセンテージを受け入れます。

使用する width: 80% を使用するとうまくいきます。

• スクリーンショット
  
  

  
  
  

• ライブの例
  
  子の幅/高さの親に対する比率
  
  
  
  

• コード

  import React from 'react';
  import { Text, View, StyleSheet } from 'react-native';
  
  const width_proportion = '80%';
  const height_proportion = '40%';
  
  const styles = StyleSheet.create({
    screen: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#5A9BD4',
    },
    box: {
      width: width_proportion,
      height: height_proportion,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#B8D2EC',
    },
    text: {
      fontSize: 18,
    },
  });
  
  export default () => (
    <View style={styles.screen}>
      <View style={styles.box}>
        <Text style={styles.text}>
          {width_proportion} of width{'\n'}
          {height_proportion} of height
        </Text>
      </View>
    </View>
  );