React Native:如何扩展TouchableOpacity

Question

我正在尝试让两个大按钮(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>
  );

Answer 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原生使用dimensions，并将windowWidth：/2放在您的btn类上。

Answer 2

一种可能的解决方案是使用react原生的Dimensions

https://reactnative.dev/docs/dimensions

  import { Dimensions } from 'react-native';

  const width = Dimensions.get('window').width;

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