我正在尝试将图像边框添加到“平面列表”项目。为此,我使用了ImageBackground组件。但是,在iOS上,ImageBackground resizeMode:'repeat'是缩放/拉伸图像。它在Android上运行良好。Here是snack链接。附件为参考图像。如何让它像Android视图一样,即。边界应该是细/薄不缩放?
import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground, FlatList } from 'react-native';
import Constants from 'expo-constants';
export default function App() {
const chapters = [{ id: 1 }, { id: 2 }, { id: 3 }];
itemKeyExtractor = (item) => item.id;
const renderItem = ({item}) => {
return (
<ImageBackground
source={require('./assets/border.jpg')}
style={{
padding: 10,
marginVertical: 10,
width: 'auto',
height: 'auto',
}}
imageStyle={{ resizeMode: 'repeat'}}
resizeMode="repeat">
<View style={styles.item}>
<Text> {item.id}</Text>
</View>
</ImageBackground>
);
};
return (
<View style={styles.container}>
<FlatList
data={chapters}
renderItem={renderItem}
keyExtractor={itemKeyExtractor}
style={{ flex: 1 }}
/>
</View>
);
}
const styles = StyleSheet.create({
item: {
flexDirection: 'row',
backgroundColor: 'white',
borderRadius: 100,
padding: 10,
},
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
1条答案
按热度按时间tgabmvqs1#
我建议你弄清楚图像的正确裁剪,使一个有图案的边界。我在这个Snack Expo example上为你做的。这是iOS和Android之间最接近的边界模式。