当父视图具有 flexDirection =“row”时，React Native 子视图没有获得 100% 的宽度答案

【问题标题】：React Native child view not getting 100% width, when parent view has flexDirection ="row当父视图具有 flexDirection =“row”时，React Native 子视图没有获得 100% 的宽度
【发布时间】：2021-05-13 00:53:38
【问题描述】：

  <View style={{flexDirection: 'row', backgroundColor: 'yellow'}}>
      <TouchableOpacity
        style={{
          padding: 5,
          borderWidth: 1,
          backgroundColor: 'pink',
        }}>
        <Text style={styles.goldenText}>Cancel</Text>
      </TouchableOpacity>
  <TouchableOpacity
        style={{
          padding: 5,
          borderWidth: 1,
          backgroundColor: 'pink',
        }}>
        <Text style={styles.goldenText}>Cancel</Text>
      </TouchableOpacity>
    </View>

我的父视图有 flexDirection="row"。我需要我的子组件动态地占用父视图的整个宽度。即，如果有 3 个子组件，我需要将其平分，在黄色区域中，它们之间没有边距。尝试过宽度，弯曲等但似乎没有任何工作..

【问题讨论】：

标签： android ios react-native user-interface flexbox

【解决方案1】：

试试 flex: 1 的父样式。

例如：

<View style={{flex: 1, flexDirection: 'row', backgroundColor: 'yellow'}}>

【讨论】：

【解决方案2】：

我解决了这个问题。经过一番研究，我发现，当父视图有 flexDirection:"row" touchableopacity（子组件）内的 flex 不起作用。我用 pressable 替换了 TouchabllOpacity，现在 flex 可以正确应用了。

    <View
      style={{
        flexDirection: 'row',
        backgroundColor: 'yellow',
      }}>
      <Pressable
        style={{
          padding: 5,
          borderWidth: 1,
          backgroundColor: 'pink',
          flex: 1,
        }}>
        <Text style={styles.goldenText}>Cancel</Text>
      </Pressable>
      <Pressable
        style={{
          padding: 5,
          borderWidth: 1,
          backgroundColor: 'pink',
          flex: 1,
        }}>
        <Text style={styles.goldenText}>Cancel</Text>
      </Pressable>
      <Pressable
        style={{
          padding: 5,
          borderWidth: 1,
          backgroundColor: 'pink',
          flex: 1,
        }}>
        <Text style={styles.goldenText}>Cancel</Text>
      </Pressable>
    </View>

【讨论】：