javascript - 存在导航栏时如何在顶部屏幕上显示动画？

Question

我想在导航标题栏上方显示动画..

但它显示在标题栏下方。

我也使用了 zIndex，但它不起作用。

我还附上了一张我得到的结果的图片。

这是在 App.js 中，我刚刚设置了导航屏幕

import MainScreen from "./screens/MainScreen";
import SecondScreen from "./screens/SecondScreen";
import ThirdScreen from "./screens/ThirdScreen";
import FourthScreen from "./screens/FourthScreen";

const AppNavigator = createStackNavigator({

  FourthScreen: {
    screen: FourthScreen
  },
  SecondScreen: {
    screen: SecondScreen,
  },
  ThirdScreen: {
    screen: ThirdScreen
  },
  MainScreen: {
    screen: MainScreen
  }

})

const App = createAppContainer(AppNavigator);

export default App;

在 FourthScreen.js 中，这是想要做动画的屏幕。

import React, { Component } from 'react';
import {Text, Animated, View} from "react-native";


class FourthScreen extends Component {

    static navigationOptions = {
        title: "Screen Title",
        headerTitleStyle: {
            textAlign: "center",
            flex: 1
          },
    }

    constructor(props) {
        super(props);
        this.state = {  }
    }

    componentWillMount(){
         this.position = new Animated.ValueXY(0,0);
        Animated.spring(this.position, {
            toValue: {x: 0, y: -50}
        }).start();
    }

    render() { 
        return (
            <Animated.View style={this.position.getLayout()}>
                <View style= {styles.ball} />
            </Animated.View>
         );
    }
}

const styles = {
    ball: {
        height: 60,
        width: 60,
        borderRadius: 30,
        borderWidth: 30,
        borderColor: "black",
        zIndex: 100,
        position: "absolute"
    }
}

export default FourthScreen;

标签： javascriptreactjsreact-nativeanimation