(React-Native) Flatlist 中的项目在第一次加载时不显示样式表中的正确样式

Question

我正在尝试创建一个视图，顶部卡片显示图像，底部卡片显示水平平面列表中的相关信息。

样式在第一次加载时损坏，当我刷新代码而不做任何更改时，组件会按预期显示正确的样式。

这是在我将 React Native 从 0.60.5 迁移到 0.61.0 后发生的。

这是组件的代码。

<View
        accessible={Platform.OS === 'ios' ? false : true}
        style={styles.container}>
        <View style={styles.itemContainer}>
          <View style={styles.topContainer}>
            <ImageBackground
              source={{uri: item.img, cache: 'default'}}
              resizeMode="contain"
              imageStyle={{borderRadius: 4}}
              style={styles.topContainer}>
            </ImageBackground>
            <View style={styles.bottomContainer}>
              <Text style={styles.destination}>{item.title}</Text>
              <Text style={styles.subtitle}>{item.description}</Text>
            </View>
          </View>
        </View>
      </View>

这是样式表。

import {StyleSheet, Platform} from 'react-native';
import Color from '../../../../utilities/Color';
import {BaseStyle} from '../../../../utilities/Style';

const flex1 = {
  flex: 1,
};

const flexRow = {
  flexDirection: 'row',
};

const centerView = {
  justifyContent: 'center',
  alignItems: 'center',
};

const cardStyle = {
  ...Platform.select({
    ios: {
      borderWidth: 1,
      borderColor: Color.white,
      shadowOffset: {width: 1, height: 1},
      shadowOpacity: 0.2,
      shadowRadius: 2,
      borderRadius: 2,
      shadowColor: 'rgba(0, 0, 0, 1.0)',
    },
    android: {
      elevation: 2,
      borderRadius: 2,
    },
  }),
};

export default StyleSheet.create({
  container: {
    ...flex1,
    padding: 16,
    borderBottomWidth: 1,
    borderColor: '#efefef',
  },
  title: {
    ...BaseStyle.font16RobotoBoldGray,
  },
  subtitle: {
    ...BaseStyle.textSubHead1,
    top: 10,
    marginRight: 10,
    color: Color.lightTextGray,
  },
});      
export const ItemStyle = StyleSheet.create({
      container: {
        ...flex1,
        marginBottom: 15,
      },
      itemContainer: {
        height: 210,
        width: 260,
        marginRight: 15,
      },
      topContainer: {
        height: 162,
        borderRadius: 4,
      },
      bottomContainer: {
        ...cardStyle,
        position: 'absolute',
        left: 0,
        right: 0,
        top: 120,
        marginHorizontal: 8,
        paddingHorizontal: 15,
        paddingVertical: 12,
        borderRadius: 4,
        backgroundColor: Color.white,
      },
      destination: {
        ...BaseStyle.textTitle,
        fontSize: 14,
        lineHeight: 18,
        color: Color.darkGray,
        marginBottom: 8,
      },
      subHeading: {
        marginBottom: 4,
      },
      caption: {
        ...BaseStyle.textCaption,
        color: Color.lightTextGray,
      },
      subtitle: {
        ...BaseStyle.textSubHead1,
      },
    });

这是第一次加载时的图片

这是我刷新代码后的图像。

请指教一种方法，我该如何调试。或者我在样式表中做错了什么？

Answer 1

删除所有 borderRadius 解决了它。

(React-Native) Flatlist 中的项目在第一次加载时不显示样式表中的正确样式

(React-Native) Item in Flatlist do not shows the correct style as in Stylesheet on the first load

android

css

react-native

react-native-flatlist