How can I change the scene(Navigator) by click DrawerLayoutAndroid - react-native

Question

guys.I need a help.
I want use DrawerLayoutAndroid and Navigator as my App navigator.
And I have a problem here.
I code like this,and it doesn't work.
<TouchableHighlight>
<Text style={styles.menu} onPress={() => this.refs['myNavigator'].navigator.push({id:'List',name:'List Page'})}>Menu Item1</Text>
</TouchableHighlight>
How can I change the scene(Navigator) by click DrawerLayoutAndroid.
Hope somebody help...
Here's the main code.
renderScene:
renderScene(route, navigator) {
var routeId = route.id;
if (routeId === 'SplashPage') {
return (
<SplashPage
navigator={navigator} />
);
}
if (routeId === 'MainPage') {
return (
<MainPage openDrawer={this.openDrawer.bind(this)}
navigator={navigator} {...route.passProps}/>
);
}
if (routeId === 'List') {
return (
<ListComponent
navigator={navigator} {...route.passProps} />
);
}
if (routeId === 'Detail') {
return (
<DetailComponent
navigator={navigator} {...route.passProps} />
);
}
if (routeId === 'Share') {
return (
<ShareComponent
navigator={navigator} {...route.passProps} />
);
}
}
render part:
var navigationView = (
<View style={{flex: 1, backgroundColor: '#161616'}}>
<Text style={styles.menuTitle}>Nav Title</Text>
<TouchableHighlight >
<Text style={styles.menu}>Home</Text>
</TouchableHighlight>
<TouchableHighlight>
<Text style={styles.menu} onPress={() => this.refs['myNavigator'].props.navigator.push({id:'List',name:'List Page'})}>Menu Item1</Text>
</TouchableHighlight>
<TouchableHighlight>
<Text style={styles.menu}>Menu Item2</Text>
</TouchableHighlight>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth={260}
ref={'DRAWER'}
drawerPosition={DrawerLayoutAndroid.positions.left}
renderNavigationView={() => navigationView}>
<Navigator
ref={'myNavigator'}
initialRoute={{id: 'SplashPage', name: 'SplashPage'}}
renderScene={this.renderScene.bind(this)}
navigator={this.props.navigator}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromRight;
}}
/>
</DrawerLayoutAndroid>
)

Answer 1

I got it working when coded the other way around:
Render
render() {
return (
<Navigator
ref="navigator"
initialRoute={{name: "creategame", id: "creategame"}}
renderScene={this._renderScene.bind(this)}
configureScene={() => ({...FadeAndroid})}
/>
)
}
RenderScene
_renderScene(route, navigator) {
// Put your logic here selecting a component/scene based on route.id
let contentView = ...
return (
<DrawerLayoutAndroid
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => <MenuView route={routeId} navigator={navigator} />}>
{contentView}
</DrawerLayoutAndroid>
)
}
Then finally call navigator.push (which is passed as a prop to my MenuView component; see example below) and you're done.
MenuView
class MenuView extends Component {
constructor() {
super();
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([])
};
}
componentDidMount() {
var menuItems = [
{title: 'xxx', id: 'x'},
{title: 'yyy', id: 'y'},
... and so on
]
this.setState({
dataSource: this.state.dataSource.cloneWithRows(menuItems)
});
}
_renderMenuRow(rowData) {
return (
<TouchableHighlight onPress={this._onPress.bind(this, rowData.id)}>
<Text style={styles.menuRowText}> {rowData.title} </Text>
</TouchableHighlight>
);
}
_onPress(id) {
this.props.navigator.push({
id: id,
});
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderMenuRow.bind(this)}
);
};
}