Question

我正在尝试在屏幕底部实现波浪图像，如下面的图像所示。我试过 alignSelf:'flex-end' 但它不起作用。如果我给顶部尺寸，那么如果屏幕尺寸改变图像顶部也会改变。如何在完美的底部实现波浪图像？

我也尝试过 svg 但无法让它工作。

这是我的代码

import React from 'react';
import {
  View,
  Text,
  Dimensions,
  TextInput,
  StyleSheet,
  Image,
} from 'react-native';
import database from '@react-native-firebase/database';
import auth from '@react-native-firebase/auth';
import Otp from '../assets/otp.svg';
import Waves from '../assets/waves.svg';
import {Icon} from 'native-base';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

const Login = () => {
  return (
    <View style={styles.container}>
      <View style={styles.view1}>
        <View style={styles.header}>
          <Icon type="AntDesign" name="arrowleft" style={styles.icon} />
          <View style={styles.headerView}>
            <Text style={styles.headerText}>OTP Verification</Text>
          </View>
        </View>
        <Otp width={250} height={130} style={{top: -40}} />
      </View>
      <View style={styles.view2}>
        <View style={styles.mainDiv}>
          <View style={styles.loginForm}></View>
          <View style={styles.iconDiv}></View>
        </View>
        <View style={styles.waves}>
          {/* <Waves /> */}
          <Image
            style={styles.wavesImg}
            source={require('../assets/waves.png')}
          />
        </View>
      </View>
    </View>
  );
};
export default Login;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
  },
  view1: {
    flex: 1,
    backgroundColor: '#e69545',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  view2: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  header: {
    // backgroundColor: 'red',
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  headerView: {alignItems: 'center', width: '80%'},
  headerText: {color: '#fff', fontSize: 27},
  icon: {
    color: '#fff',
    // width: 40,
    fontSize: 35,
  },
  mainDiv: {
    backgroundColor: '#fff',
    width: (windowWidth / 10) * 8,
    height: (windowHeight / 100) * 40,
    position: 'absolute',
    borderRadius: 25,
    top: -60,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.3,
    shadowRadius: 4.65,

    elevation: 8,
  },
  waves: {
    //   // height: 300,
    //   position: 'absolute',
    //   bottom: 0,
    // backgroundColor: 'green',
    // position: 'absolute',
    // top: (windowHeight / 10) * 3.1,
    width: '100%',
    height: 130,
    // alignSelf: 'flex-end',
    marginTop: (windowHeight / 10) * 3,
  },
  wavesImg: {
    width: '100%',
    height: 130,
  },
});

Answer 1

我认为您应该尝试将波浪的样式设置为这样：

waves: {
  height: 130,
  width: windowWidth, 
  bottom: 0,
  position: 'absolute'
  }

如何将元素移动到div的底部

1 个答案: