【发布时间】：2016-08-24 17:15:41
【问题描述】：
在 React Native + Redux 中，根据路由动态更改 direction 属性、转换动画、<NavigationCardStack/> 的正确方法是什么？
例如，当我使用<Navigator/> 时，我动态设置了configureScene 属性，它根据不同的路由工作：
configureScene(route, routeStack) {
if(route.type === 'Modal'){
return Navigator.SceneConfigs.FloatFromBottom
}
return Navigator.SceneConfigs.PushFromRight
}
<Navigator
configureScene={this.configureScene}
...
/>
编辑
这是我的设置 - 还原：
function mapStateToProps(state) {
return {
navigation: state.navReducer,
}
}
export default connect(
mapStateToProps,
{
pushRoute: (route) => push(route),
popRoute: () => pop(),
}
)(NavigationRoot)
我的减速机（navReducer.js）：
const initialState = {
index: 0,
key: 'root',
routes: [{
key: 'login',
title: 'Login',
component: Login,
direction: 'horizontal',
}]
}
function navigationState (state = initialState, action) {
switch(action.type) {
case PUSH_ROUTE:
if (state.routes[state.index].key === (action.route && action.route.key)) return state
return NavigationStateUtils.push(state, action.route)
case POP_ROUTE:
if (state.index === 0 || state.routes.length === 1) return state
return NavigationStateUtils.pop(state)
default:
return state
}
}
export default navigationState
这些方法处理推送和弹出以及导航栏后退（弹出）按钮的设置方式：
_handleBackAction() {
if (this.props.navigation.index === 0) {
return false
}
this.props.popRoute()
return true
}
_handleNavigate(action) {
switch (action && action.type) {
case 'push':
this.props.pushRoute(action.route)
return true
case 'back':
case 'pop':
return this._handleBackAction()
default:
return false
}
}
renderOverlay = (sceneProps) => {
if(0 < sceneProps.scene.index)
{
return (
<NavigationHeader
{...sceneProps}
renderLeftComponent={() => {
switch(sceneProps.scene.route.title){
case 'Home':
return (
<TouchableHighlight onPress={() => this._handleBackAction()}>
<Text}>X</Text>
</TouchableHighlight>
)
并被这样的组件调用：
const route = {
home: {
type: 'push',
route: {
key: 'home',
title: 'Home',
component: Home,
direction: 'vertical',
}
}
}
【问题讨论】：
-
这似乎找到了，你说它有效，有什么问题？
-
@ajmajmajma 这适用于
<Navigator/>，对于<NavigationCardStack/>会有所不同。例如，必须传入不同的参数，我应该返回什么？因为Navigator.SceneConfigs.FloatFromBottom等不起作用。 -
@Jo Ko 这不可能直接。如果您查看 NavigatorCardStack _renderScene 方法。它使用传递给 NavigatorCardStack 的道具来确定方向。唯一可能的方法是根据包装组件中的活动场景更改方向道具。 github.com/facebook/react-native/blob/master/Libraries/…
-
@while1 你能举个例子吗？所以我也可以回答这个问题。
-
@ajmajmajma 检查您是否阅读了我之前的评论。请告诉我。
标签： javascript reactjs react-native redux react-jsx