為什么在我的頁面在React Native中轉換之前有一個白色的“加載屏幕”？

Question

我終於讓我的頁面過渡動畫正常工作（它從屏幕的底部滑到頂部）但由於某種原因，在頁面出現之前出現了一個空白的白色“加載屏幕”，它破壞了整個點滑動動畫！ 有人可以告訴我如何擺脫這個白色的屏幕？！

請看我制作的視頻： https ： //youtu.be/92XGji7L-RU

const { height: deviceHeight } = Dimensions.get('window');

class OrdersScreen extends Component {
    constructor(props) {
        super(props);

        this.state = {
            offset: new Animated.Value(deviceHeight),
        };
    }

    componentDidMount() {
        Animated.timing(this.state.offset, {
          duration: 350,
          toValue: 0,
        }).start();
    }

    closeModal() {
        Animated.timing(this.state.offset, {
          duration: 350,
          toValue: -deviceHeight,
        }).start(Actions.pop);
    }

    searchOrders = searchTerm => {
        this.props.dispatch(searchOrdersWithStatus(this.props.orderStatus, searchTerm))
    }

    render() {
        // default to Active Orders
        const status = this.props.orderStatus || ORDER_TYPE_DELIVERIES;
        let title = 'Order History';

        if (ORDER_TYPE_DELIVERIES == status) {
            title = 'Orders';
        }

        if (ORDER_TYPE_ISSUES == status) {
            title = 'Item Alerts';
        }

        return (
            <Animated.View style={[styles.wrapper, { transform: [{ translateY: this.state.offset }] }]}>
                <OrderHeader title={title} enableBack={false} />

                <FullWidthSearchBar placeholder='Search Orders' changeCallback={this.searchOrders} timeoutMillis={500} />

                <OrderSummaryList orderStatus={status} />
            </Animated.View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        alignItems: 'center',
        justifyContent: 'flex-start'
    }
});

Answer 1

您的<OrderSummaryList />組件可能從API加載數據 - 這需要一些時間......初始渲染數據還沒有准備好......渲染顯示了''組件。 這個“內容”是動畫的......后來的數據到了，內容被重新渲染。

您可以嘗試在啟動時延遲動畫 - 使用.delay(miliseconds)而不是componentDidMount()的start() componentDidMount() 。 通過實驗查找所需的時間 - 太短可以顯示加載（慢速連接），太長時間看起來不響應應用程序。