|
import React from 'react'; |
|
import { |
|
AppRegistry, |
|
Text, |
|
View, |
|
} from 'react-native'; |
|
|
|
import { |
|
createRouter, |
|
NavigationProvider, |
|
StackNavigation, |
|
} from '@exponent/ex-navigation'; |
|
|
|
const Router = createRouter(() => ({ |
|
splash: () => SplashScreen, |
|
a: () => AScreen, |
|
b: () => BScreen, |
|
c: () => CScreen, |
|
})); |
|
|
|
class App extends React.Component { |
|
render() { |
|
return ( |
|
<NavigationProvider router={Router}> |
|
<StackNavigation initialRoute={Router.getRoute('splash')}/> |
|
</NavigationProvider> |
|
); |
|
} |
|
} |
|
|
|
class SplashScreen extends React.Component { |
|
componentDidMount() { |
|
const routes = [Router.getRoute('a'), Router.getRoute('b'), Router.getRoute('c')]; |
|
this.props.navigator.immediatelyResetStack(routes, 2) |
|
} |
|
|
|
render() { |
|
return null; |
|
} |
|
} |
|
|
|
class AScreen extends React.Component { |
|
static route = { |
|
navigationBar: { |
|
title: 'A', |
|
} |
|
}; |
|
|
|
render() { |
|
return ( |
|
<View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}> |
|
<Text>A!</Text> |
|
<Text onPress={this._goToA}> |
|
Push A |
|
</Text> |
|
</View> |
|
) |
|
} |
|
|
|
_goToA = () => { |
|
this.props.navigator.push(Router.getRoute('b')); |
|
} |
|
} |
|
|
|
class BScreen extends React.Component { |
|
static route = { |
|
navigationBar: { |
|
title: 'B', |
|
} |
|
}; |
|
|
|
render() { |
|
return ( |
|
<View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}> |
|
<Text>B!</Text> |
|
<Text onPress={this._goToC}> |
|
Push C |
|
</Text> |
|
<Text onPress={this._goBackHome}> |
|
Go back to A |
|
</Text> |
|
</View> |
|
) |
|
} |
|
|
|
_goToC = () => { |
|
this.props.navigator.push(Router.getRoute('c')); |
|
}; |
|
|
|
_goBackHome = () => { |
|
this.props.navigator.pop(); |
|
} |
|
} |
|
|
|
class CScreen extends React.Component { |
|
static route = { |
|
navigationBar: { |
|
title: 'C', |
|
} |
|
}; |
|
|
|
render() { |
|
return ( |
|
<View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}> |
|
<Text>C!</Text> |
|
<Text onPress={this._goBackHome}> |
|
Go back to B |
|
</Text> |
|
</View> |
|
) |
|
} |
|
|
|
_goBackHome = () => { |
|
this.props.navigator.pop(); |
|
} |
|
} |
|
|
|
AppRegistry.registerComponent('untitled1', () => App); |