2016-05-26 10 views
0

Ich versuche, NavigationExperimental in React Native zu implementieren. Ich habe eine onChangeTab-Funktion, die den Titel über Redux an den AppContainer sendet. Ich habe es funktioniert, aber aus irgendeinem Grund RenderOverlay ist das Rendern und Aktualisieren des Titels aber renderScene wird nur einmal ausgeführt.Reactive Native NavigationExperimental Redux renderScene wird nur einmal ausgeführt und aktualisiert Requisiten nicht

siehe Kommentare im folgenden Code:

class AppContainer extends React.Component {  
    render() { 
    return (
     <NavigationCardStack 
     navigationState={this.props.navigationState} 
     onNavigate={this.props.onNavigate} 
     renderOverlay={props => { 
      // Here title updates and executes every time I change to another tab. 
      console.log(props.navigationState.title, 'title'); 
      return (
       <Text>{props.navigationState.title || 'Title'}</Text> 
      ) 
     }} 
     renderScene={(props) => { 
      // Here does not change because it is executed just one. 
      console.log(props.navigationState.title, 'title'); 
       return (
       <View> 
        <View style={styles.appbar}> 
        <Text style={styles.title}>{props.navigationState.title || 'Title'}</Text> 
        </View> 
        <View> 
        <TabsView /> 
        </View> 
       </View> 
      ) 
     }} 
     /> 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    // Here title updates every time I change to another tab. 
    console.log(state.navigationState.title); 
    return { 
    navigationState: state.navigationState 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onNavigate: (action) => { 
     if (action.type && (
     action.type === NavigationRootContainer.getBackAction().type || 
     action.type === NavigationCard.CardStackPanResponder.Actions.BACK.type) 
    ) { 
     dispatch(navigatePop()) 
     } else { 
     dispatch(navigatePush(action)) 
     } 
    } 
    } 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(AppContainer) 

Hier ist mein Minderer:

function navigationState(state = initialNavState, action) { 
    switch (action.type) { 
     case TITLE_PUSH: 
      return { 
       ...state, 
       title: action.title 
      } 
     ... 

Antwort

Verwandte Themen