混合图像背景底部
问题描述 投票：0回答：3
我一直在尝试实现一个设计，但我不知道如何正确地混合图像，我不希望图像的底部像下图一样显示
但这就是我在实现后在 React Native 中实现时得到的结果
这是我的代码，请问我该怎么做才能正确设计
render() {
return (
<View style={{ flex: 1, backgroundColor: "#000" }}>
<StatusBar
backgroundColor="transparent"
translucent={true}
barStyle="light-content"
/>
<ScrollView
keyboardShouldPersistTaps="always"
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
automaticallyAdjustContentInsets={false}
directionalLockEnabled={true}
bounces={false}
scrollsToTop={false}
>
{/* this is the picture I am trying to blend */}
<ImageBackground
style={{
width: "100%",
height: 445
}}
source={require("../genny.png")}
>
<View
style={{
width: "100%",
height: 460,
backgroundColor: "rgba(0,0,0,0.40)",
flexDirection: "column"
}}
>
<Image
resizeMode="contain"
style={{
width: 140,
height: 31,
left: 20,
marginTop: StatusBar.currentHeight + 10,
alignSelf: "center"
}}
source={require("../kl.png")}
/>
<ScrollView />
<Text
style={{
fontFamily: "bn",
color: "#FCAA4A",
letterSpacing: 2,
alignSelf: "center",
fontSize: 60
}}
>
LIONSHEART
</Text>
<View
style={{
flexDirection: "row",
width: 155,
height: 14,
alignSelf: "center",
alignItems: "center",
justifyContent: "space-between"
}}
>
<Text
style={{
color: "#746E6E",
fontSize: 11,
fontFamily: "camptonBold"
}}
>
2019
</Text>
<View
style={{
backgroundColor: "#746E6E",
height: 4,
width: 4,
borderRadius: 2
}}
/>
<Text
style={{
color: "#746E6E",
fontSize: 11,
fontFamily: "camptonBold"
}}
>
1hr34mins
</Text>
<View
style={{
backgroundColor: "#746E6E",
height: 4,
width: 4,
borderRadius: 2
}}
/>
<Text
style={{
color: "#746E6E",
fontSize: 11,
fontFamily: "camptonBold"
}}
>
Drama
</Text>
</View>
<View
style={{
width: 50,
backgroundColor: "#FCAA4A",
height: 20,
justifyContent: "space-between",
flexDirection: "row",
marginTop: 12,
paddingLeft: 10,
paddingRight: 10,
alignItems: "center",
alignSelf: "center"
}}
>
<Image
resizeMode="stretch"
style={{ width: 16, height: 16 }}
source={require("../play.png")}
/>
<Text
style={{
color: "white",
fontSize: 14,
fontFamily: "camptonBold"
}}
>
PLAY
</Text>
</View>
</View>
</ImageBackground>
</ScrollView>
</View>
);
}
3个回答
0
投票
投票
请检查以下代码快照，它将有助于实现上面提到的设计
我还添加了 snack.expo.io
您可以根据您的要求更改颜色和图像。
import * as React from 'react';
import {ScrollView,Image,ImageBackground, Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1,}}>
{/* this is the picture I am trying to blend */}
<ImageBackground
style={{
paddingBottom:30,
width: "100%",
backgroundColor:'#070707',
flex:1
}}
source={require("./assets/snack-icon.png")}
resizeMode="contain"
>
<View
style={{
height:'100%',
alignContent:'center',
backgroundColor: "rgba(0,0,255,0.40)",
}}
>
<Image
resizeMode="contain"
style={{
marginTop:60,
width: 140,
height: 31,
alignSelf:'center',
}}
source={require("./assets/snack-icon.png")}
/>
<Text
style={{
marginTop:430,
fontFamily: "bn",
color: "#FCAA4A",
alignSelf:'center',
alignContent:'center',
justifyContent:'center',
letterSpacing: 2,
alignItems:'center',
fontSize: 50
}}
>
LIONSHEART
</Text>
<View
style={{
flexDirection: "row",
width: 155,
height: 14,
justifyContent:'space-evenly',
bottom:0,
marginTop:10,
alignSelf: "center",
alignItems: "center",
}}
>
<Text
style={{
color: "#ffffff",
fontSize: 11,
fontFamily: "camptonBold"
}}
>
2019
</Text>
<View
style={{
backgroundColor: "#746E6E",
height: 4,
width: 4,
borderRadius: 2
}}
/>
<Text
style={{
color: "#ffffff",
fontSize: 11,
fontFamily: "camptonBold"
}}
>
1hr34mins
</Text>
<View
style={{
backgroundColor: "#746E6E",
height: 4,
width: 4,
borderRadius: 2
}}
/>
<Text
style={{
color: "#ffffff",
fontSize: 11,
fontFamily: "camptonBold"
}}
>
Drama
</Text>
</View>
</View>
</ImageBackground>
<View
style={{
backgroundColor: "#FCAA4A",
height: 20,
position:'absolute',
bottom:0,
marginBottom:50,
alignItems:'center',
alignSelf:'center',
flexDirection: "row",
padding: 15,
}}
>
<Image
resizeMode="stretch"
style={{ width: 16, height: 16 }}
source={require("./assets/snack-icon.png")}
/>
<Text
style={{
color: "white",
marginLeft:8,
fontSize: 14,
alignItems:'center',
fontFamily: "bold"
}}
>
PLAY
</Text>
</View>
<View
style={{
justifyContent:'center',
width:'100%',
backgroundColor: "#3f3f3f",
height: 20,
alignItems:'center',
alignSelf:'center',
flexDirection: "row",
padding: 15,
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: 60,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
0
投票
投票
我后来解决了我的问题，但我添加了大约 300 行新代码，我创建了 20 个视图并使它们的位置绝对，然后我使它们的不透明度减少
0.020.900.88410400<ImageBackground/>
这是新代码
render() {
return (
<View style={{flex: 1, backgroundColor: '#000'}}>
<StatusBar backgroundColor='transparent' translucent={true} barStyle='light-content'/>
<ScrollView
keyboardShouldPersistTaps='always' showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
automaticallyAdjustContentInsets={false}
directionalLockEnabled={true}
bounces={false}
scrollsToTop={false}>
<ImageBackground
style={{
width: '100%',
height: 445,
}}
source={require('../genny.png')}>
<Image resizeMode="contain"
style={{width: 140, height: 31,
marginTop: StatusBar.currentHeight+10, alignSelf: 'center' }}
source={require('../kl.png')}/>
<ScrollView>
</ScrollView>
</ImageBackground>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 1,left: 0,
backgroundColor: 'rgba(0,0,0,0.00)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 3,left: 0,
backgroundColor: 'rgba(0,0,0,0.02)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 5,left: 0,
backgroundColor: 'rgba(0,0,0,0.04)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 10,left: 0,
backgroundColor: 'rgba(0,0,0,0.06)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 20,left: 0,
backgroundColor: 'rgba(0,0,0,0.08)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 30,left: 0,
backgroundColor: 'rgba(0,0,0,0.10)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 40,left: 0,
backgroundColor: 'rgba(0,0,0,0.12)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 50,left: 0,
backgroundColor: 'rgba(0,0,0,0.14)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 60,left: 0,
backgroundColor: 'rgba(0,0,0,0.16)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 70,left: 0,
backgroundColor: 'rgba(0,0,0,0.18)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 80,left: 0,
backgroundColor: 'rgba(0,0,0,0.20)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 90,left: 0,
backgroundColor: 'rgba(0,0,0,0.22)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 100,left: 0,
backgroundColor: 'rgba(0,0,0,0.24)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 110,left: 0,
backgroundColor: 'rgba(0,0,0,0.26)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 120,left: 0,
backgroundColor: 'rgba(0,0,0,0.28)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 130,left: 0,
backgroundColor: 'rgba(0,0,0,0.30)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 140,left: 0,
backgroundColor: 'rgba(0,0,0,0.32)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 150,left: 0,
backgroundColor: 'rgba(0,0,0,0.34)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 160,left: 0,
backgroundColor: 'rgba(0,0,0,0.36)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 170,left: 0,
backgroundColor: 'rgba(0,0,0,0.38)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 180,left: 0,
backgroundColor: 'rgba(0,0,0,0.40)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 190,left: 0,
backgroundColor: 'rgba(0,0,0,0.42)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 200,left: 0,
backgroundColor: 'rgba(0,0,0,0.44)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 210,left: 0,
backgroundColor: 'rgba(0,0,0,0.46)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 220,left: 0,
backgroundColor: 'rgba(0,0,0,0.48)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 230,left: 0,
backgroundColor: 'rgba(0,0,0,0.50)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 240,left: 0,
backgroundColor: 'rgba(0,0,0,0.52)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 250,left: 0,
backgroundColor: 'rgba(0,0,0,0.54)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 260,left: 0,
backgroundColor: 'rgba(0,0,0,0.56)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 270,left: 0,
backgroundColor: 'rgba(0,0,0,0.58)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 280,left: 0,
backgroundColor: 'rgba(0,0,0,0.60)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 290,left: 0,
backgroundColor: 'rgba(0,0,0,0.62)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 300,left: 0,
backgroundColor: 'rgba(0,0,0,0.64)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 310,left: 0,
backgroundColor: 'rgba(0,0,0,0.66)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 320,left: 0,
backgroundColor: 'rgba(0,0,0,0.68)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 330,left: 0,
backgroundColor: 'rgba(0,0,0,0.70)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 340,left: 0,
backgroundColor: 'rgba(0,0,0,0.72)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 350,left: 0,
backgroundColor: 'rgba(0,0,0,0.74)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 360,left: 0,
backgroundColor: 'rgba(0,0,0,0.76)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 370,left: 0,
backgroundColor: 'rgba(0,0,0,0.78)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: +79531727897 0,
backgroundColor: 'rgba(0,0,0,0.80)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 390,left: 0,
backgroundColor: 'rgba(0,0,0,0.82)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 400,left: 0,
backgroundColor: 'rgba(0,0,0,0.84)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 410,left: 0,
backgroundColor: 'rgba(0,0,0,0.86)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 420,left: 0,
backgroundColor: 'rgba(0,0,0,0.88)',
flexDirection: 'column'
}}></View>
<View style={{
width: '100%',
height: 10,position: 'absolute',top: 424,left: 0,
backgroundColor: 'rgba(0,0,0,0.9)',
flexDirection: 'column'
}}></View>
<Text style={{fontFamily: 'bn', color: '#FCAA4A', letterSpacing: 2, alignSelf: 'center',position: 'absolute',
top: 360,
fontSize: 60}}>LIONSHEART</Text>
<View style={{flexDirection: 'row', width: 155, height: 14, alignSelf: 'center',position: 'absolute',
top: 420,
alignItems: 'center', justifyContent: 'space-between'}}>
<Text style={{color: '#746E6E', fontSize: 11, fontFamily: 'camptonBold'}}>
2019
</Text>
<View style={{backgroundColor: '#746E6E', height: 4, width: 4, borderRadius: 2}}>
</View>
<Text style={{color: '#746E6E', fontSize: 11, fontFamily: 'camptonBold'}}>
1hr34mins
</Text>
<View style={{backgroundColor: '#746E6E', height: 4, width: 4, borderRadius: 2}}>
</View>
<Text style={{color: '#746E6E', fontSize: 11, fontFamily: 'camptonBold'}}>
Drama
</Text>
</View>
<View style={{width: 50, backgroundColor: '#FCAA4A', height: 20, justifyContent: 'space-evenly',
flexDirection: 'row', marginTop: 12, alignItems: 'center', alignSelf: 'center',position: 'absolute',
top: 430,}}>
<Image
resizeMode="stretch" style={{width: 12,height: 12,}}
source={require('../play.png')}/>
<Text style={{color: 'white', fontSize: 10,
fontFamily: 'camptonBold'}}>PLAY</Text>
</View>
);
}
}
0
投票
投票
只需使用线性渐变：
<Image
style={styles.absolute}
source={{ uri: drink.imageUrl }}
blurRadius={20}/>
<LinearGradient
colors={['transparent', 'rgba(255,255,255,1)']}
style={styles.absolute}/>
原答案：链接
最新问题
- eslint-plugin-simple-import-sort 排序错误
- Selenium Google 登录在自动化中被阻止
- 将部分行与 pandoc 向右对齐（md -> html）
- 方法prepareInterfaceForExtensionConfiguration呈现空白视图而不是提供的内容
- 从列数据中对表标题进行分类
- 如何将命令行参数传递给使用 open 命令运行的程序？
- 在 Jetpack Compose 中禁用 DropdownMenu 和 DropdownMenuItem 的涟漪效果
- VNRecognizeTextRequest 失败，但可以在 Preview.app 中选择文本
- Cookie 横幅，需要吗？
- 仅检索 Laravel 中每个团队内用户的指定角色
- 如何仅在变换上应用转换：translateX()？
- 尝试应用程序跳转到 Google TV 上的“预装”“云”应用程序时出错
- 带有 protoc_builtin PHP 的 Buf 与实际的 protoc 插件有不同的行为？
- 使用quick_xml和serde序列化数据时如何添加xml声明？
- 使用 intelliJ 将字符串串联重构为 StringBuilder
- 读取文本文件中的特定行 - 跳过始终转到最后一行
- json 文件中的 powershell 字符问题
- 如何在主列表中的每个嵌套列表上打印带有新行的嵌套列表
- Lwjgl / Opengl 字体渲染
- 调度程序初始化失败无法加载配置
© www.soinside.com 2019 - 2024. All rights reserved.