React Native：Flex布局下如何修改Menu圆角处的棕色背景

问题原因 #

你的Menu组件直接放在棕色背景的container容器中，且未设置与周围stomach、lastfoot一致的左右内边距，导致Menu左右两侧的圆角区域直接透出了container的棕色背景。

解决方法 #

给Menu组件包裹一个背景色为#f3f4fc（与stomach、lastfoot一致）的外层容器，并设置相同的左右内边距，确保Menu圆角区域的周围是正确的背景色，而非父容器的棕色。

修改后的完整代码 #

JSX部分：

function Home() {
  return (
    <View style={styles.container}>
      <View style={styles.header}></View>
      <View style={styles.footer}>
        <Text style={styles.title}>Innovative solution</Text>
      </View>
      <View style={styles.stomach}></View>
      {/* 新增外层容器包裹menu */}
      <View style={styles.menuWrapper}>
        <View style={styles.menu}>
          <Text> how to change brown background colour of radius  </Text>
        </View>
      </View>
      <View style={styles.lastfoot}>
        <Text></Text>
      </View>
    </View>
  );
}

export default Home;

样式表部分：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'brown',
  },
  header: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'brown',
  },
  lastfoot: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f3f4fc',
  },
  stomach: {
    flex: 5,
    backgroundColor: '#f3f4fc',
    paddingVertical: 50,
    paddingHorizontal: 30,
    textAlign: 'center',
    shadowRadius: 1,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
  },
  footer: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    color: 'white',
    fontSize: 30,
    fontWeight: 'bold',
  },
  // 新增外层容器样式
  menuWrapper: {
    flex: 0.5,
    backgroundColor: '#f3f4fc',
    paddingHorizontal: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  menu: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    overflow: 'hidden',
    borderRadius: 28,
    paddingBottom: 5,
  },
});

内容的提问来源于stack exchange，提问作者DRONG TECHNO