Question

我试图在几秒钟后更改屏幕，这是为了在响应本机中启动屏幕效果。我有一个主屏幕，其中包含应用程序的来源。第一个屏幕的代码是：

import HomeUp from './HomeUp' 
import Splash from './Splash'
import React, { Component } from "react";

export default class OriginPage extends Component {

constructor(props){
 super(props)
 this.state = {
   component : <Splash />
 }
}

componentDidMount(){

   // Start counting when the page is loaded
   this.timeoutHandle = setTimeout(()=>{
   // Add your logic for the transition
   this.setState({ component: <HomeUp /> })
   }, 5000);
}

componentWillUnmount(){
   clearTimeout(this.timeoutHandle); 
}

render() {

return (
  this.state.component
     );
   }
}

我的初始屏幕是：

import React from 'react';
import { StatusBar , View , Text , ActivityIndicator } from 'react-native';
export default class Splash extends React.Component {
    render() {

        return (
            <View style={{ flex: 1 , justifyContent: 'center' , alignItems: 'center' , backgroundColor : '#34495e'}}>
                <StatusBar backgroundColor="#2c3e50" barStyle="light-content"/> 
                <Text style={{ color : 'white',fontSize : 18 }}>Hello Splash</Text>
                <ActivityIndicator color={'white'}/> 
            </View>
        )
    }
}

到目前为止，一切正常，并且5秒后屏幕也可以正常工作，但这下面的代码有bug。

       import React, { Component } from "react";
        class HomeUp extends Component {

        render () {
            const { navigate } = this.props.navigation;
            return(
               <TouchableHighlight  onPress={() => navigate("Products", { product: item })} underlayColor="transparent">
                  <View style={styles.view} >
                  <Image style={styles.image} source={{uri: item.images[0].src}} />
                  <Text style={styles.name}>{item.name}</Text>
                </View>
              </TouchableHighlight> 
);
}

}

仅加载此屏幕没有任何错误，但是在更改屏幕时出现undefined navigation.props错误。向前进致敬。

Answer 1

如果要在HomeUp组件中解构导航道具，则应按以下步骤操作：

const { navigation } = this.props;

或者：

const navigate = this.props.navigation;

希望有帮助。

更改屏幕会显示未定义的道具。导航错误会自动响应

1 个答案: