import React from 'react';
import {View,StyleSheet, Image} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
const DashboardScreen=()=>{
return (
<View style={styles.outerView}>
<View style={styles.viewStyle}>
<TouchableOpacity style={styles.touchableOpacityStyle}>
<Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
</TouchableOpacity>
<TouchableOpacity activeOpacity={.5} style={styles.touchableOpacityStyle}>
<Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
</TouchableOpacity>
</View>
<View style={styles.viewStyle}>
<TouchableOpacity activeOpacity={.5} style={styles.touchableOpacityStyle}>
<Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
</TouchableOpacity>
<TouchableOpacity activeOpacity={.5} style={styles.touchableOpacityStyle}>
<Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
</TouchableOpacity>
</View>
<View style={styles.viewStyle}>
<TouchableOpacity activeOpacity={.5} style={styles.touchableOpacityStyle}>
<Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
</TouchableOpacity>
<TouchableOpacity activeOpacity={.5} style={styles.touchableOpacityStyle}>
<Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
</TouchableOpacity>
</View>
</View>
);
};
const styles=StyleSheet.create({
outerView:{
flex:1,
padding:12
},
viewStyle:{
flexDirection:"row",
justifyContent:"space-around",
marginBottom:15
},
touchableOpacityStyle:{
borderRadius:15,
height:150,
width:150
},
imageStyle:{
flex:1,
borderRadius:15
}
});
export default DashboardScreen;
我想在一个可触摸的组件中包含一张图片!我在这里遇到了样式问题,因为我是React-Native的新手。我是React-Native的新手,所以在这里遇到了样式问题。边框半径被应用到可触摸组件中,但它并没有被附加到可触摸组件中的图片上。是不是因为父组件中的flex-direction: "row"(即TouchableOpacity)?
为图像组件使用'resizeMode'道具。
<TouchableOpacity style={styles.touchableOpacityStyle}>
<Image style={styles.imageStyle} resizeMode={'contain'} source={require('../../assets/images/beach.jpg')}></Image>
</TouchableOpacity>