1、IOS上面opacity重疊失效

在 iOS 上，當兩個具有相同背景色的元素重疊時，不透明度（opacity）較低的元素會顯示在較高的元素上方。

所以考慮使用rgba的形式。

// 對于下面這種寫法，如果存在container和activeIndicator重疊，則始終會展示container的顏色
const styles = StyleSheet.create({container: {height: 6,// 在 iOS 上，當兩個具有相同背景色的元素重疊時，// 不透明度（opacity）較低的元素會顯示在較高的元素上方。// 所以需要改用 rgba 的形式backgroundColor: '#ffffff',opacity: 0.51,flex: 1,borderRadius: 8,marginHorizontal: 3,overflow: 'hidden',},activeIndicator: {flex: 1,backgroundColor: '#ffffff',},
});// 修改后
const styles = StyleSheet.create({container: {height: 6,backgroundColor: 'rgba(255, 255, 255, 0.51)', // hereflex: 1,borderRadius: 8,marginHorizontal: 3,overflow: 'hidden',},activeIndicator: {flex: 1,backgroundColor: 'rgba(255, 255, 255, 1)', // here},
});

2、Image使用，圖片不能撐滿整個容器

image#resizemode

例如，對于下面這段代碼可能存在這樣的情況，圖片不能撐滿整個容器，上下會存在空隙。

<View style={styles.bgContainer}><Imagesource={{ uri: image }}resizeMode='contain' // 更新為 'cover'style={styles.bg}/>
</View>bgContainer: {position: 'absolute',top: 0,bottom: 0,left: 0,right: 0,// backgroundColor: 'yellow',
},
bg: {width: WINDOW_WIDTH,height: WINDOW_HEIGHT,// backgroundColor: 'blue',
},

將 resizeMode 屬性設置為 ‘contain’，這會導致圖片按照原始比例進行縮放，以適應容器的尺寸。如果圖片的寬高比與容器的寬高比不匹配，那么圖片可能無法填滿整個容器。

如果希望圖片填滿整個容器，可以嘗試將 resizeMode 屬性設置為 ‘cover’，這樣圖片會被拉伸或壓縮以填滿容器。