React native React Native：如何拉伸TouchableOpacity

我正在尝试让两个大按钮（TouchableOpacity）彼此相邻，占据屏幕宽度的50%

但它们似乎只与其中的文本部分一样宽

如何使两个TouchableOpacity占据整个屏幕的宽度，每个占据50%的宽度

  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      backgroundColor: 'lightblue',
      height: 200,
      justifyContent: 'space-around',
    },
    btn: {
      flex: 1,
      backgroundColor: 'red',
      justifyContent: 'center',
      padding: 20,
      borderWidth: 1,
    },
  });

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.btn}>
        <Text>Left</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.btn}>
        <Text>Right</Text>
      </TouchableOpacity>
    </View>
  );

const styles=StyleSheet.create({
容器：{
flexDirection:'行'，
背景颜色：“浅蓝色”，
身高：200，
为内容辩护：“周围的空间”，
},
btn:{
弹性：1，
背景颜色：“红色”，
为内容辩护：“中心”，
填充：20，
边框宽度：1，
},
});
返回(
左边
赖特
);

尝试为btn类添加50%的宽度

  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      backgroundColor: 'lightblue',
      height: 200,
      justifyContent: 'space-around',
    },
    btn: {
      width: '50%',
      backgroundColor: 'red',
      padding: 20,
      borderWidth: 1,
    },
  });

---

您还可以使用react native，并在btn类中添加宽度：windowWidth/2。

尝试将50%的宽度添加到btn类中

  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      backgroundColor: 'lightblue',
      height: 200,
      justifyContent: 'space-around',
    },
    btn: {
      width: '50%',
      backgroundColor: 'red',
      padding: 20,
      borderWidth: 1,
    },
  });

---

您还可以使用react-native并在btn类上放置宽度：windowWidth/2。

一个可能的解决方案是使用react-native的

维度


一种可能的解决方案是使用react native的
维度


这很有效，谢谢你。（我最终使用了链接中推荐的
useWindowDimensions（）
）。尽管我觉得这本应该可以实现，而不必测量宽度，只需使用CSS即可。这很有效，谢谢。（我最终按照链接中的建议使用了
useWindowDimensions（）
）。尽管我觉得不需要测量宽度就可以做到这一点，只需使用CSS即可。