Question

原生。我做了状态组件和router.js文件。模拟器给我错误无法找到变量我不知道是什么问题但我在模拟器中得到这个错误。

这是我的代码

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

import StatusComponent from './component/StatusComponent';
import HeaderComponent from './component/headerComponent';
import Router from './component/Router';
 import MainPage from './component/MainPage';

 export default class Point extends Component {
 render() {
  return (
   <View style={{flex: 1,backgroundColor: 'white'}}>

    <StatusComponent/>
    <HeaderComponent/>


    </View>

  );
  }
 }

const styles = StyleSheet.create({
 container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
 },
  welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
 textAlign: 'center',
 color: '#333333',
 marginBottom: 5,
},
} );

AppRegistry.registerComponent('Point', () => Point);

这是我的状态组件

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

 export class StatusComponent extends Component{
 render()
 {
  return(
     <View style={styles.Bar}>

    </View>

)
};
}
export default StatusComponent;

const styles=StyleSheet.create({
Bar:{
    backgroundColor: 'white',
    height: 20

}
})

这里是Router.Js的代码，这个文件可以解决问题

   import React, { Component } from 'react'
   import {
  StyleSheet,
  Text,
  Navigator,
  TouchableOpacity
 } from 'react-native'

import MainPage from './MainPage'
import Sports from './Sports'

 export default class Router extends Component {
  constructor(){
    super()
 }
  render() {
    return (
     <Navigator
        initialRoute = {{ name: 'MainPage', title: 'MainPage' }}
        renderScene = { this.renderScene }
        navigationBar = {
           <Navigator.NavigationBar
              style = { styles.navigationBar }
              routeMapper = { NavigationBarRouteMapper } />
        }
       />
     );
  }
   renderScene(route, navigator) {
     if(route.name == 'MainPage') {
     return (
        <MainPage
           navigator = {navigator}
           {...route.passProps} 
        />
     )
    }
    if(route.name == 'Sports') {
     return (
        <Sports
           navigator = {navigator}
           {...route.passProps} 
        />
     )
    }
 }

}

 var NavigationBarRouteMapper = {
 LeftButton(route, navigator, index, navState) {
   if(index > 0) {
     return (
        <TouchableOpacity
           onPress = {() => { if (index > 0) { navigator.pop() } }}>
           <Text style={ styles.leftButton }>
              Back
           </Text>
        </TouchableOpacity>
     )
  }
  else { return null }
 },
  RightButton(route, navigator, index, navState) {
    if (route.openMenu) return (
      <TouchableOpacity
        onPress = { () => route.openMenu() }>
        <Text style = { styles.rightButton }>
           { route.rightText || 'Menu' }
        </Text>
     </TouchableOpacity>
    )
  },
   Title(route, navigator, index, navState) {
   return (
     <Text style = { styles.title }>
        {route.title}
     </Text>
   )
  }
  };

  const styles = StyleSheet.create({
   navigationBar: {
  backgroundColor: 'blue',
  },
  leftButton: {
  color: '#ffffff',
   margin: 10,
  fontSize: 17,
   },
    title: {
  paddingVertical: 10,
  color: '#ffffff',
  justifyContent: 'center',
  fontSize: 18
   },
   rightButton: {
  color: 'white',
  margin: 10,
  fontSize: 16
  }
  })

Answer 1

在StatusComponent文件中，export前面有class StatusComponent extends Component。您应该删除export并将export default StatusComponent;保留在底部。

如果之后，它仍然无法正常工作，请检查您用于导入absolute path的{{1}}。确保它正确

Answer 2

statusComponent文件中存在错误，这是非常愚蠢的错误

无法找到变量React-native

2 个答案: