我正在尝试使用基于此链接的反应路由器 v4 的反应路由器本机
标签给Match
我一个错误
React.createElement: type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in. Check the render method of
组件可用,我什至尝试显式创建组件。
完整代码导入 React, { Component } from 'react'; 导入 { AppRegistry, StyleSheet, Text, View, TouchableHighlight, } from 'react-native'; 从 'react-router' 导入 { Match, Miss, MemoryRouter as Router };
const componentFactory = (routeName) => () => (
<View>
<Text style={styles.route}>{routeName}</Text>
</View>
)
const NavLink = ({to, children}, context) => {
const pressHandler = () => context.router.transitionTo(to);
return (
<TouchableHighlight onPress={pressHandler}>
{children}
</TouchableHighlight>
)
}
NavLink.contextTypes = {router: React.PropTypes.object}
export default class RR4Native extends Component {
render() {
return (
<Router>
<View style={styles.container}>
<View style={styles.routeContainer}>
<Match exactly pattern="/" component={componentFactory('Home')}/>
<Match pattern="/about" component={componentFactory('About')}/>
<Match pattern="/topics" component={componentFactory('Topics')}/>
<Miss component={componentFactory('Nope, nothing here')}/>
</View>
<View style={styles.container}>
<NavLink to="/">
<Text style={styles.routeLink}>
Home
</Text>
</NavLink>
<NavLink to="/about">
<Text style={styles.routeLink}>
About
</Text>
</NavLink>
<NavLink to="/topics">
<Text style={styles.routeLink}>
Topics
</Text>
</NavLink>
<NavLink to="/broken">
<Text style={styles.routeLink}>
Broken
</Text>
</NavLink>
</View>
</View>
</Router>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
route: {
color: '#701010',
fontSize: 40
},
routeLink: {
color: '#0000FF'
},
routeContainer: {
flex: 1,
justifyContent: 'center'
}
});
AppRegistry.registerComponent('RR4Native', () => RR4Native);