我试着举一个导航器的例子,但场景总是空白。有些建议告诉我将flex:1设置为导航器,但它不起作用! 这是我的代码: index.android.js:
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Navigator,
Text,
View
} from 'react-native';
import Homepage from './Homepage' ;
class NavigatorTest extends Component {
render() {
var defaultName = 'Homepage' ;
var defaultCom = Homepage ;
return (
<Navigator style = {{flex:1}}
initialRoute = {{name: defaultName,component:Homepage }}
configureScene = {() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump ;
}}
renderScene = {(route,navigator) => {
let Component = route.component ;
if (route.component) {
return <Component {...route.params} navigator = {navigator} />
}
}} />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('NavigatorTest', () => NavigatorTest);
Homepage.js
import React, {
Component,
StyleSheet,
TouchableOpacity,
Text,
View
} from 'react';
import Detailpage from './Detailpage' ;
export class Homepage extends React.Component {
static propTypes = {
};
constructor(props) {
super(props);
}
_pressButton() {
const {navigator} = this.props ;
if(navigator) {
navigator.push({
name: 'Detailpage',
component:Detailpage,
})
}
}
render() {
return (
<View>
<TouchableOpacity onPress = {this._pressButton}>
<Text>click to jump to Detailpage!</Text>
</TouchableOpacity>
</View>
);
}
}
Detailpage.js
import React, {
Component,
StyleSheet,
TouchableOpacity,
Text,
View
} from 'react';
import Homepage from './Homepage' ;
export class Detailpage extends React.Component {
static propTypes = {
};
constructor(props) {
super(props);
}
_pressButton() {
const {navigator} = this.props ;
if (navigator) {
navigator.pop() ;
}
}
render() {
return (
<View>
<TouchableOpacity onPress = {this._pressButton}>
<Text>click to get back</Text>
</TouchableOpacity>
</View>
);
}
}
我是反应原生的新人,请提前给我一些建议!
答案 0 :(得分:0)
尝试简化和分离Navigator逻辑。通过这种方式调试也会更容易。
class NavigatorTest extends Component {
render() {
return (
<Navigator
initialRoute={{id: 'Homepage'}}
configureScene={this.configureScene}
renderScene={this.renderScene}
/>
);
}
configureScene() {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}
renderScene(route, navigator) {
switch(route.id) {
case 'Homepage':
return this.renderHomepage(navigator);
case 'Detailpage':
return this.renderDetailpage(navigator);
default:
throw new Error('No route found for id ' + route.id);
}
}
renderHomepage(navigator) {
return <Homepage navigator={navigator} />;
}
renderDetailpage(navigator) {
return <Detailpage navigator={navigator} />;
}
}
Homepage.js
...
_pressButton() {
this.props.navigator.push({id: 'Detailpage'});
}
...
答案 1 :(得分:0)
将Villeaka提出的导航器逻辑分开,以便进行阅读和分析。
方法“this.renderHomepage(navigator)”在“renderScene”范围内被调用,因此其中的“this”引用“renderScene”而不是NavigatorTest组件,将“this”传递给如下所示的新变量:
renderScene(route, navigator) {
var me = this;
switch(route.id) {
case 'Homepage':
return me.renderHomepage(navigator);
case 'Detailpage':
return me.renderDetailpage(navigator);
default:
throw new Error('No route found for id ' + route.id);
}}
答案 2 :(得分:0)
我认为你的导航看起来有些混乱,我发现这个视频让它变得如此简单
https://www.youtube.com/watch?v=jGOst2TLha0
顺便说一下,我对你的代码很快就是
<Navigator style = {{flex:1}}
initialRoute = {{name: defaultName,component:Homepage }}
configureScene = {() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump ;
}}
renderScene = {(route,navigator) => {
let Component = route.component ;
if (route.component) {
return <Component {...route.params} navigator = {navigator} />
}
}} />
那个&#34;让组件&#34;看起来并不正确,因为变量名称不应与&#34;组件&#34;导入代码顶部的库导致含糊不清