Question

我有一个全屏图像，我想在加载应用程序状态时显示它。如何设置？

我想实现这样的东西：

if (videos == "") {
  return (
    <View style={styles.imageContainer}>
      <Image
        style={styles.image}
        source={require("../assets/images/tc-logo.png")}
      />
    </View>
  );
}

我当前的app.js看起来像这样

export default class App extends React.Component {
  runInitialAppStartActions = () => {
    store.dispatch(fetchData());
  };

  render() {
    return (
      <ImageBackground
        source={require("./assets/images/TC_background.jpg")}
        style={styles.container}
      >
        <Provider store={store}>
          <PersistGate
            loading={null}
            persistor={persistor}
            onBeforeLift={this.runInitialAppStartActions}
          >
            <AppNavigator
              ref={navigatorRef => {
                NavigationService.setTopLevelNavigator(navigatorRef);
              }}
            />
          </PersistGate>
        </Provider>
      </ImageBackground>
    );
  }
}

Answer 1

很抱歉，我无法发表评论，我需要50点声誉才能发表评论。我是React的新手，也许您可以使用componentDidMount（）方法解决。

您可以查看以下问题：Stop rendering of a component after componentDidMount()

Answer 2

您可以简单地这样做。我只是假设您的状态为视频。

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as videoAction from '../actions/videoAction.js';

class App extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     videos: ''
    };
   }
  async componentDidMount() {
    await this.props.videoAction.getVideo();

    this.setState({
     videos: this.props.videoState.videos
    }); 
  }
  runInitialAppStartActions = () => {
    store.dispatch(fetchData());
  };

  render() {
    const {videos} = this.state;

    if (videos == "") {
      return (
        <View style={styles.imageContainer}>
          <Image
            style={styles.image}
            source={require("../assets/images/tc-logo.png")}
          />
        </View>
      );
     }else{
        return (
          <ImageBackground
            source={require("./assets/images/TC_background.jpg")}
            style={styles.container}
          >
            <Provider store={store}>
              <PersistGate
                loading={null}
                persistor={persistor}
                onBeforeLift={this.runInitialAppStartActions}
              >
                <AppNavigator
                  ref={navigatorRef => {
                  NavigationService.setTopLevelNavigator(navigatorRef);
                  }}
                />
              </PersistGate>
            </Provider>
          </ImageBackground>
        );
      }
  }
}
const mapStateToProps = (state) => {
 return {
  videoState: state.videoState
 };
};
const mapDispatchToProps = (dispatch) => {
 return{
  videoAction: bindActionCreators(videoAction, dispatch)
 };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

使用Redux加载状态时显示全屏图像

2 个答案: