Question

你好，我对React Native还是相当陌生，并且正在使用flex = 1来使按钮覆盖屏幕的整个宽度，但是由于某种原因却没有发生。

Answer 1

-Flex：1覆盖了容器的整个宽度和高度。

-在您的情况下，您的视图（第9行）占用了容器的可用孔空间这是TouchableOpacity（第8行）

问题在于TouchableOpacity不会占用可用的孔空间，因为您没有给他该指令。

只需将style = {{flex：1}}添加到您的TouchableOpacity，它应该可以工作

Answer 2

您可以将TouchableOpacity用作视图，因此可以从<View>...</View>中删除内部Button组件，而仅使用<TouchableOpacity style={styles.buttonStyle}><Text style={styles.textStyling}>Buy now</Text></TouchableOpacity>。

我不知道您的CardSection组件如何，但是我敢打赌，将flex: 1设置为TouchableOpacity并删除嵌套的View可以解决您的问题。

您使用样式表的方式有误。正确的方法是从StyleSheet导入react-native，如下所示：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  buttonStyle: {
    backgroundColor: "#f7f7f7",
    flex: 1, // This will be applied to TouchableOpacity
    flexDirection: 'row'
  },
  textStyling: {
     // ...
  }
});

我强烈建议您看一下Native Base（它是准备使用的一组组件）。

您可以在线访问此snack

来尝试该解决方案

在样式中进行响应时本机flex = 1不起作用

2 个答案: