混合图像背景的底部

时间：2019-03-18 11:29:33

标签： reactjs react-native

我一直在尝试实现设计，但是我不知道如何正确地融合图像，我不希望图像的底部显示如下图所示 enter image description here

但这是我在实现后在本机中实现的时候得到的

下面是我的代码，请问我该怎么做才能正确获得设计

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>
  );
}

2 个答案:

答案 0 :(得分：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',
  },
});

答案 1 :(得分：0)

我后来解决了问题，但是我添加了约300行新代码，创建了20个视图并将它们的位置设为绝对，然后使它们的不透明度降低了0.02，即0.90然后是{{ 1}}，然后使它们的顶部边距减小10，即0.88然后410，一直到0.00，所以它从下到上创建了一个混合图像，然后我做了400绝对中的所有文本并也编码了它们的上边距，这并不容易，但是我明白了，这是下面的结果

enter image description here

这是新代码

<ImageBackground/>
相关问题
最新问题