Question

我是本机反应的新手，this error会在我使用堆栈导航和appContainer时发生

我看到了类似的问题，但并没有帮助我 Fix Error: The component for route 'Home' must be a React component

我创建index.js以简化导入

这是我的代码：

export * from './Details';
export * from './Map';
export * from './MyHome';
export * from './Transition';

app.js

import  React,{Component} from 'react';
import {
  TextInput,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity
} from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import {Details, Transition,Map,MyHome}  from './src';


export default class App extends React.Component {
  render() {
    return <Transition />;
  }
}

详细信息屏幕代码

    import  React,{Component} from 'react';
import {
  Button,
  Text,
  View,
  StyleSheet
} from 'react-native';
import MyHome from './MyHome';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
class Details extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.navigate('Home')}
        />
      </View>
    );
  }
}

export {Details};

地图屏幕代码

import  React,{Component} from 'react';
import {
  TextInput,
  StyleSheet,
  View,
  Text,
} from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';

import MapView,{Marker} from 'react-native-maps';
class Map extends React.Component{
render(){
 return(
   <View style={styles.container}>
   <MapView style={styles.map1} initialRegion={{latitude:24.758770,longitude:46.662038,latitudeDelta:0.09,longitudeDelta:0.0921}}>
   <MapView.Marker
     coordinate={{latitude:24.758770,longitude:46.662038}}
     title="My location"
     description="Yess"
   />
   </MapView>

   </View>
 );
}
}

const styles= StyleSheet.create({
  container:{
   ...StyleSheet.absoluteFillObject
},
map1:{
  ...StyleSheet.absoluteFillObject
}
});

export {Map};

转换屏幕代码

import React,{Component} from 'react';
import {Animated,Easing ,Platform} from 'react-native';

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';

import Details  from './Details';
import MyHome  from './MyHome';
import Map from './Map';

let SlideFromRight= (index, position) => {
  const opacity= position.interpolate({
    inputRange: [index -1,index,index+1],
    outputRange:[0,1,1],
  });
  const scaleY= position.interpolate({
    inputRange: [index -1,index,index+1],
    outputRange:[0,1,1],
  });
  return {opacity,transform:[{scaleY} ] }
}

const TransitionConfiguration = () => {
  return {
    transitionSpec:{
      duration: 750,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: (sceneProps) => {
      const {layout, position , scene} = sceneProps;
      const width = layout.initWidth;
      const height =layout.initHeight;
      const {index, route}= scene;
      const parms=route.parms || {};
      const transition = parms.transition || 'default';
      return {
        default: SlideFromRight(index, position, width),
      } [transition];

    },
  }
}
const RootStack = createStackNavigator(
  {
    Home: MyHome,
    Details: Details,
    Map: Map

  },
  {
    initialRouteName: 'MyHome',
    transitionConfig: TransitionConfiguration,
  }
);

const AppContainer = createAppContainer(RootStack);

class Transition extends Component{
  render(){
    return <AppContainer/>;
  }
}
export {Transition};

我的主屏幕代码

import  React,{Component} from 'react';
import {
  TextInput,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity
} from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import Details from './Details';


class MyHome extends React.Component{

  moveToSlideFromRight= ()=> {
    this.props.navigation.navigate('Details');
  }
  render(){
    return(
<View style={styles.container}>
<StatusBar
backgroundColor="#77BD8B"
barStyle="light-content"/>
<Icon name="md-menu" size={40} color='white'/>
<Text style={styles.welcome}> Log In to My App</Text>
<TextInput style={styles.input}
placeholder="User name"
/>
<TextInput style={styles.input}
placeholder="Password"
secureTextEntry
/>
<View style={styles.Btncontainer}>
<TouchableOpacity style={styles.userBtn}>
<Text style={styles.BtnText}

onPress={() => {this.props.navigation.navigate('Map')}}

>Log In</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.moveToSlideFromRight} style={styles.userBtn}>
<Text style={styles.BtnText}>Sign up</Text>
</TouchableOpacity>
</View>
</View>
      );
  }

}


const styles = StyleSheet.create({
  container:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#77BD8B'
  },
  welcome:{
    fontSize:30,
    textAlign:'center',
    margin:10,
    color:'white'
  },
  input:{
    width:"90%",
    backgroundColor:'white',
    marginBottom:10,
    borderRadius:10
  },
  Btncontainer:{
    flexDirection:'row',
    justifyContent:'center',

    },
  userBtn:{
    backgroundColor:'#D4DADE',
    borderRadius:15,
    margin:10,
    width:"15%"
    },
    BtnText:{
      fontSize:16,
      textAlign:'center',

    }

});


export {MyHome};

Answer 1

尝试改用导出默认值

export default MyHome;

错误：路线“ Home”的组件必须是React组件

1 个答案: