如何在图像中设置边框的底部半径?
以及如何将图像蒙版到绿色区域?
我尝试了以下代码,但是在上方共享的图像中无法获得半径比
查看代码:
<View style={styles.wrapper}>
<View style={styles.welcomeWrapper}>
<View style={styles.welcomeImageWrapper}>
<Image style={{width:'100%'}} source={require('../assets/images/test-slide.jpg')}/>
</View>
</View>
<View style={{
height: 100,
backgroundColor: colors.white,
justifyContent: 'flex-end',
alignItems: 'center'
}}>
<Text style={{marginBottom:50,fontSize:18,fontFamily:'Montserrat-Regular'}}>Deneme Text </Text>
</View>
</View>
样式代码:
wrapper:{
flex:1,
display: 'flex',
backgroundColor:colors.white,
},
welcomeWrapper:{
flex:1,
justifyContent:'center',
backgroundColor:colors.green01,
overflow: 'hidden',
position:'relative',
width:'100%',
borderBottomRightRadius:Dimensions.get('window').width/100*50,
borderBottomLeftRadius:Dimensions.get('window').width/100*50,
},
最佳答案
看到图像掩模的形状后,我认为您应该使用react-native-svg
之类的东西来创建真实的图像掩模。
步骤:
View
的position: absolute
,以便您的图像始终位于背景中并且可以被 mask react-native-svg
添加到您的项目中,例如使用yarn add react-native-svg
,并使用react-native link
链接库。最后,重新启动Metro bundler并编译您的应用程序(run-android
或run-ios
)。 View
中,该蒙版应与文本容器具有相同的backgroundColor
。 flexbox
布局进行一些样式设置,以便在每个设备上具有几乎相同的外观。在此示例中, mask 采用屏幕高度的5/6
,因为我的 mask flex
号为5,而我的文本flex
为1 因此,这就是我最终得到的结果:
import * as React from 'react';
import { Dimensions, Image, StyleSheet, Text, View } from 'react-native';
import { Path, Svg } from 'react-native-svg';
const mask = {
width: Dimensions.get('window').width,
height: 50,
bgColor: '#ecf0f1',
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'flex-end',
},
image: {
position: 'absolute',
},
mask: {
flex: 5,
justifyContent: 'flex-end',
},
textContainer: {
flex: 1,
width: '100%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: mask.bgColor,
},
text: {
fontSize: 50,
textAlign: 'center',
}
});
const App = () => (
<View style={styles.container}>
<Image style={styles.image} source={require('./assets/image.jpg')} />
<View style={styles.mask}>
<Svg width={mask.width} height={mask.height}>
<Path
fill={mask.bgColor}
d={`M 0 0 L 0 ${mask.height} L ${mask.width} ${mask.height} L ${mask.width} 0 A ${mask.width / 2} ${mask.height / 2} 0 0 1 ${mask.width / 2} ${mask.height / 2} A ${mask.width / 2} ${mask.height / 2} 0 0 1 0 0 z `} />
</Svg>
</View>
<View style={styles.textContainer}>
<Text style={styles.text}>Text</Text>
</View>
</View>
);
export default App;
这是
Android
仿真器的结果希望这可以帮助!
链接到小吃:https://snack.expo.io/BJlZgpuB7(但我的图像未加载到小吃上:()
关于react-native - React-Native: mask 图像的底部半径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51750926/