Question

我正在ReactNative中创建一个应用程序，我遇到了这个问题。以下是包含代码的文件

index.js

import React from 'react';
import {AppRegistry} from 'react-native';
import Home from 'MobileApp/src/users/Home';
AppRegistry.registerComponent('MobileApp', () => App);

Home.js

import React, {Component} from 'react';
import { View,Button} from 'react-native';
import Profile from './Profile';

class Home extends Component{
  onPressProfile(){ 
    navigate('Profile', { name: 'Profile' })
  }

  render() {
    return(
      <View style={styles.viewStyle}>
        <View style={styles.buttonStyle}>
          <Button
            onPress={this.onPressProfile}
            title="Profile"         
          />  
        </View>     
      </View>
    );  
  }
}

const styles= {
  viewStyle: {
    flex: 1,
    justifyContent: 'center',
  },
};
export default  Home;

错误发生在我的Home.js.这是什么错误？提前谢谢。

Answer 1

在index.js文件中，您应该使用Home组件作为应用的入口点。

<强> Index.js

import React from 'react';
import {AppRegistry} from 'react-native';
import Home from 'MobileApp/src/users/Home';

AppRegistry.registerComponent('MobileApp', () => Home);

在您的实际代码中，App未定义。

Answer 2

此行可能有错误：

navigate('Profile', { name: 'Profile' })

需要定义导航才能访问它。假设您正在向官方documentation

学习

const { navigate } = this.props.navigation;

导入导航就像：

import {
  StackNavigator,
} from 'react-navigation';

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});

有关导航如何运作的更多信息，请check documentation

元素类型无效：期望一个字符串或类/函数但得到：undefined，检查Home的render方法

2 个答案: