1
我正在嘗試關注react-native-navigation example並構建一個小測試應用程序。我無法讓抽屜顯示所需的屏幕，而是始終進入主屏幕。在主屏幕我有一個按鈕，推動下一個屏幕，這是工作正常。感謝有人能幫助。react-native-navigation抽屜不改變屏幕
index.ios.js
import App from './App/App'
const app = new App();
App.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Platform
} from 'react-native';
import { Navigation } from 'react-native-navigation';
// screen related book keeping
import { registerScreens } from './Screens/screens';
registerScreens();
const navigatorStyle= {
navBarBackgroundColor: '#4dbce9',
navBarTextColor: '#ffff00',
navBarSubtitleTextColor: '#ff0000',
navBarButtonColor: '#ffffff',
statusBarTextColorScheme: 'light',
statusBarTextColorScheme: 'light',
tabBarBackgroundColor: '#4dbce9',
tabBarButtonColor: '#ffffff',
tabBarSelectedButtonColor: '#ffff00'
};
export default class App extends Component {
constructor(props){
super(props)
//load some data
this.startApp();
}
startApp() {
Navigation.startSingleScreenApp({
screen: {
screen: 'app.Home',
title: 'Home',
navigatorStyle
},
drawer: {
left: {
screen: 'app.Drawer'
}
}
});
}//end of startApp
}//end of App
screens.js
import { Navigation } from 'react-native-navigation';
import Drawer from './Drawer';
import Screen1 from './Screen1';
import Home from './Home'
export function registerScreens() {
Navigation.registerComponent('app.Drawer',() => Drawer);
Navigation.registerComponent('app.Home',() => Home);
Navigation.registerComponent('app.Screen1',() => Screen1);
}
Drawer.js
import React, { Component, PropTypes } from 'react';
import {
Text,
View,
TouchableOpacity,
ToastAndroid,
StyleSheet
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
class Drawer extends Component {
//navigate to Screen1 from Drawer
_goToScreen1() {
this._toggleDrawer();
this.props.navigator.popToRoot({
title: "Screen 1",
screen: "app.Screen1"
});
}//end _goToScreen1
_toggleDrawer() {
this.props.navigator.toggleDrawer({
to: 'closed',
side: 'left',
animated: true
});
}//end _toggleDrawer
render(){
const iconSearch = (<Icon name="md-search" size={26} color="#000000" style={[styles.drawerListIcon, { paddingLeft: 2 }]} />);
const iconMovies = (<Icon name="md-film" size={26} color="#000000" style={[styles.drawerListIcon, { paddingLeft: 3 }]} />);
const iconTV = (<Icon name="ios-desktop" size={26} color="#000000" style={styles.drawerListIcon} />);
return(
<View style={styles.container}>
<View style={styles.drawerList}>
<TouchableOpacity onPress={this._goToScreen1.bind(this)}>
<View style={styles.drawerListItem}>
{iconMovies}
<Text style={styles.drawerListItemText}>
Screen1
</Text>
</View>
</TouchableOpacity>
<View style={styles.drawerListItem}>
{iconTV}
<Text style={styles.drawerListItemText} onPress={() => ToastAndroid.show('Coming Soon!', ToastAndroid.SHORT)}>
Coming Soon
</Text>
</View>
</View>
<Text style={styles._version}>
{/* 'v1.0.0' */}
</Text>
</View>
);//end of return
}//end of render
}//end of Drawer
Drawer.propTypes = {
navigator: PropTypes.object
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingLeft: 25,
justifyContent: 'center'
},
drawerList: {
},
drawerListIcon: {
width: 27
},
drawerListItem: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 23
},
drawerListItemText: {
color: 'red',
fontWeight: 'bold',
fontSize: 23,
paddingLeft: 15,
flex: 1
},
linearGradient: {
// top: 0,
// left: 0,
// right: 0,
// height: 248,
// position: 'absolute'
flex: 1
},
_version: {
color: '#3c3c3c',
position: 'absolute',
bottom: 25,
marginLeft: 53
}
});
export default Drawer
個Home.js
import React, { Component } from 'react';
import {
Text,
View,
TouchableOpacity,
StyleSheet,
Alert
} from 'react-native';
class Home extends Component {
static navigatorButtons = {
leftButtons: [
{
//icon: require('../../img/navicon_menu.png'),
title: 'Menu',
id: 'menu'
}
],
rightButtons: [
{
title: 'Edit',
id: 'edit'
},
{
//icon: require('../../img/navicon_add.png'),
title: 'add',
id: 'add'
}
]
};
constructor(props){
super(props);
// if you want to listen on navigator events, set this up
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent(event) {
if (event.id === 'menu') {
this.props.navigator.toggleDrawer({
side: 'left',
animated: true
});
}
if (event.id === 'edit') {
Alert.alert('NavBar', 'Edit button pressed');
}
if (event.id === 'add') {
Alert.alert('NavBar', 'Add button pressed');
}
}
onPressScreen1() {
this.props.navigator.push({
title: "Screen 1",
screen: "app.Screen1"
});
}
render(){
return(
<View style={{flex: 1, padding: 20}}>
<Text>Home</Text>
<TouchableOpacity onPress={this.onPressScreen1.bind(this)}>
<Text style={styles.button}>Screen 1</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
textAlign: 'center',
fontSize: 18,
marginBottom: 10,
marginTop: 10,
color: 'blue'
}
});
export default Home
Screen1.js
import React, { Component } from 'react';
import {
Text,
View,
} from 'react-native';
class Screen1 extends Component {
render(){
return(
<View>
<Text>Screen 1 :)</Text>
</View>
);
}
}
export default Screen1