NavigationExperimental：シーンのポップがポップされたシーンの再レンダリングを引き起こします

私はReact-Native with ReduxのNavigationExperimentalを使用します。私がシーンAに立ってシーンBをプッシュすると、すべてが素晴らしいです。しかし、ヘッダーのバックボタンを押してシーンBをポップしてシーンAに戻った場合は、シーンAがレンダリングされ、シーンB、シーンAがレンダリングされます。をrenderメソッドに追加して確認します。これはReact-Nativeでの通常の動作ですか、実装が間違っていますか？NavigationExperimental：シーンのポップがポップされたシーンの再レンダリングを引き起こします

相続人のシーンA：

class Home extends Component { 

render() { 

    return (
     <View style={{ flex: 1 }}> 
      <TouchableHighlight onPress={this.props.onPress}> 
      <Text>Go to about</Text> 
      </TouchableHighlight> 
     </View> 
    ) 
} 

export default Home;

相続人のシーンB：

class About extends Component { 
render() { 
    return (
     <View style={{ flex: 1 }}> 
      <Text>Hello from About</Text> 
     </View> 
    ) 
} 

export default About;

そして、ここでは、ナビゲーションを処理するクラスです：

class App extends Component { 
constructor(props) { 
    super(props); 
    this._renderHeader = this._renderHeader.bind(this); 
    this._renderScene = this._renderScene.bind(this); 
    this._navigatePush = this._navigatePush.bind(this); 
    this._navigatePop = this._navigatePop.bind(this); 
    this._renderHeader = this._renderHeader.bind(this); 
    this._renderTitle = this._renderTitle.bind(this); 
} 

render() { 
    return (
     <NavigationCardStack 
      navigationState={this.props.navigation} 
      onNavigate={this._navigatePush} 
      renderScene={this._renderScene} 
      renderHeader={this._renderHeader} 
      /> 
    ) 
} 

_renderHeader(props) { 
     return <NavigationHeader {...props} renderTitleComponent={this._renderTitle} onNavigateBack={this._navigatePop} /> 
} 

_renderTitle(props) { 
    return <NavigationHeader.Title>{props.scene.route.title}</NavigationHeader.Title> 
} 

_renderScene(props) { 
    const key = props.scene.route.key; 

    switch (key) { 
     case 'Home': 
      return <Home onPress={() => this._navigatePush({ key: 'About', title: 'About' })} /> 
     case 'About': 
      return <About /> 
    } 
} 

_navigatePush(scene) { 
    this.props.navigationActions.pushRoute(scene); 
} 

_navigatePop() { 
    this.props.navigationActions.popRoute() 
}

編集：私のnavigationReducerとnavigationActionsを追加しました：

//action creators 
function _pushRoute(route) { 
return { 
    type: actionTypes.PUSH, 
    route 
} 

function _popRoute() { 
return { 
    type: actionTypes.POP, 
} 

//thunks 
export function pushRoute(route){ 
return (dispatch) => { 
    dispatch(_pushRoute(route)) 
} 

export function popRoute(route){ 
return (dispatch) => { 
    dispatch(_popRoute()) 
} 

//Reducer 

initialState = { 
index: 0, 
key: 'root', 
routes: [ 
    { key: 'Home', title: 'Home' } 
] 
} 

function navReducer() { 
return (state = initialState, action) => { 
    switch (action.type) { 
     case actionTypes.PUSH: 
      if (state.routes[state.index].key === (action.route && action.route.key)) return state 
      return NavigationStateUtils.push(state, action.route); 
     case actionTypes.POP: 
      if (state.index === 0 || state.routes.length === 1) return state 
      return NavigationStateUtils.pop(state) 
     default: 
      return state; 
    } 
}

出典

2017-01-06 user2236165

あなたの 'navigationActions.pushRoute（scene）; 'と' navigationActions.popRoute（）メソッドが見える ' –

それらを@NaderDabitの答えに追加しました。 – user2236165

'onNavigate = {this._navigatePush}'を削除しようとしたことがありますか？ –