react-native - 在 React Native 中将项目定位在屏幕底部

Question

我想把我svg的放在屏幕的底部。我已经尝试过 flex 属性和绝对位置 ( bottom:0) 但svg没有转到屏幕底部，当我给出它的绝对位置时svg它会消失，同时zIndex也不起作用。这是我的代码。这里是小吃。小吃

import Otp from '../assets/otp2.svg';
import Waves from '../assets/waves.svg';
const windowHeight = Dimensions.get('window').height;    
const SignUp = () => {
  return (
    <View style={styles.container}>
      <View style={styles.section1}>
        <View
          style={{
            // justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'row',
          }}>
          <Icon size={40} color="white" name="west" />
          <Text style={styles.otpText}>OTP Verification</Text>
        </View>
        <Otp style={{marginBottom: 40}} />
      </View>
      <View style={styles.section2}>
        {/* <View style={styles.section3}></View> */}
        <View style={styles.wave}>
          <Waves />
        </View>
      </View>
    </View>
  );
};

export default SignUp;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  section1: {
    flex: 1,
    backgroundColor: '#f07279',
    justifyContent: 'space-evenly',
    alignItems: 'center',
  },
  section2: {
    flex: 1,
    backgroundColor: '#fff',
    // alignContent: 'flex-end',
    // alignItems: 'flex-end',
  },
  section3: {
    flex: 1,
    backgroundColor: 'grey',
    width: '80%',
    height: '80%',
    borderRadius: 25,
    // position: 'absolute',
    // zIndex: 1,
    // top: -40,
  },
  otpText: {
    fontSize: 25,
    color: '#ffffff',
    width: 200,
    fontFamily: 'sans-serif-light',
  },
  wave: {
    flex: 1,
    // position: 'absolute',
    // bottom: 0,
    width: '100%',
    // zIndex: 5,
    // marginTop: '67%',
  },
});

这是我想要做的参考。

标签： react-nativeflexboxreact-native-android