如何让设置了borderRadius的View透明且不影响KeyboardAvoidingView功能

问题根因 #

1. 当前布局默认采用垂直 flex 排列，<FlatList /> 和 <KeyboardAvoidingView /> 为同级上下排布的元素。<KeyboardAvoidingView /> 左上、右上圆角凹进去的区域不属于任何子组件的绘制范围，会默认显示外层根 View 的灰色背景，看起来像残留阴影，无法透出下层 <FlatList /> 的内容。
2. position: "absolute" 会让组件脱离正常文档流，<KeyboardAvoidingView /> 无法正常计算键盘弹出时的偏移量，因此避让功能会失效。

解决方案 #

核心思路是让 <KeyboardAvoidingView /> 保留在正常文档流内保证避让功能可用，同时让它叠在 <FlatList /> 底部的上方，让圆角区域刚好对应 <FlatList /> 的内容范围：

• 给 <FlatList /> 添加底部内边距，避免列表最底部的内容被上方的 <KeyboardAvoidingView /> 遮挡
• 给 <KeyboardAvoidingView /> 添加负的上外边距，让它整体上移覆盖在 <FlatList /> 的底部区域
• iOS 环境下建议给 <KeyboardAvoidingView /> 添加 behavior 属性，保证避让逻辑正常生效

修改后的代码如下：

import { Platform } from 'react-native';

const StoreItems = ({route}) => {
  const stores = useStores();
  const [store, setStore] = useState(null);

  useEffect(() => {
    setStore(stores[route.params.storeId]);
  });

  const styles = StyleSheet.create({
    flatList: {
      backgroundColor: 'blue',
      // 新增：底部内边距等于KeyboardAvoidingView高度，避免内容被遮挡
      paddingBottom: 60,
    },
    view: {
      height: 60,
      // 仅需左上、右上圆角可单独设置，替代全局borderRadius
      borderTopLeftRadius: 40,
      borderTopRightRadius: 40,
      backgroundColor: 'green',
      // 新增：负上外边距，上移覆盖FlatList底部
      marginTop: -60,
    },
  });


    return (
      <View style={{height: '100%'}}>
        <FlatList
          data={store.items}
          renderItem={item => {
            return <ListItem item={item} />;
          }}
          keyExtractor={item => item.id}
          style={styles.flatList}></FlatList>
        {/* iOS新增behavior属性保证避让效果，安卓可忽略 */}
        <KeyboardAvoidingView 
          style={styles.view}
          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
        />
      </View>
    );
};

修改后 <KeyboardAvoidingView /> 的圆角凹进区域会直接显示下层 <FlatList /> 的内容，不会再出现灰色残留，同时键盘避让功能完全正常。

原问题效果参考：

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