RN中的navigation的使用方式 demo
在终端中下载下来相关联的依赖库npm install react-navigation --save 运行时npm install
在终端下载tab使用库 npm install react-native-tab-navigator - -save
导入头 然后看代码
/** index.android.js
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import
React
, {
Component
}
from
'react'
;
import
{
AppRegistry
,
StyleSheet
,
Text
,
View
,
Image
,
Button
}
from
'react-native'
;
import
{
StackNavigator
}
from
'react-navigation'
;
import
ThreeScreen
from
'./Three.js'
;
class
HomeScreen
extends
React
.
Component
{
static
navigationOptions
=
{
title:
'Welcome'
,
};
render
() {
const
{
navigate
}
=
this
.
props
.
navigation
;
return
(
<
View
>
<
Text
>
Hello, Chat App!
Text
>
<
Button
onPress
=
{()
=>
navigate
(
'Chat'
)}
title
=
"Chat with Lucy"
/>
View
>
);
}
}
class
ChatScreen
extends
React
.
Component
{
static
navigationOptions
=
{
title:
'Chat with Lucy'
,
};
render
() {
const
{
navigate
}
=
this
.
props
.
navigation
;
return
(
<
View
>
<
Text
>
Chat with Lucy
Text
>
<
Button
onPress
=
{()
=>
navigate
(
'Three'
)}
title
=
"to to ThreeScreen"
/>
View
>
);
}
}
const
SimpleApp
=
StackNavigator
({
Home:
{
screen:
HomeScreen
},
Chat:
{
screen:
ChatScreen
},
Three:
{
screen:
ThreeScreen
},
});
var
styles
=
StyleSheet
.
create
({
wrapper:
{
height:
80
,
},
slide:
{
height:
80
,
resizeMode:
Image
.
resizeMode
.
contain
,
},
});
AppRegistry
.
registerComponent
(
'test'
, ()
=>
SimpleApp
);
另一个界面中的代码Three.js
import
React
,{
Component
}
from
'react'
;
import
{
AppRegistry
,
Text
,
View
,
Button
,
}
from
'react-native'
;
class
Three
extends
React
.
Component
{
static
navigationOptions
=
{
title:
'Three Sceen'
,
};
render
() {
const
{
goBack
}
=
this
.
props
.
navigation
;
return
(
<
Button
title
=
"Go back"
onPress
=
{()
=>
goBack
()}
/>
);
}
}
export
default
Three
;//导出Three 让别的导入时可以找到
自己摸索，如果不对，谢谢大家前来留言指导。