javascript - 在 React Native 中使 View 为父级的 80% 宽度

Question

我正在 React Native 中创建一个表单，并想让我的 TextInput 占屏幕宽度的 80%。

使用 HTML 和普通 CSS，这会很简单:

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

除了 React Native 不支持 display 属性、百分比宽度或自动边距。

那么我应该怎么做呢？有 some discussion of this problem在 React Native 的问题跟踪器中，但建议的解决方案看起来像是讨厌的黑客。

Answer 1

从 React Native 0.42 开始，height: 和 width: 接受百分比。

在样式表中使用 width: 80% 就可以了。

• 截图
  
  

• 实例
  <强> Child Width/Height as Proportion of Parent
  
  

• 代码

  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>
  );