Question

我正在尝试在React Native中实现NavigationExperimental。我有一个onChangeTab函数，通过Redux将标题发送到AppContainer。我得到了它的工作，但由于某种原因，renderOverlay重新渲染和更新标题，但renderScene只执行一次。

请参阅以下代码中的评论：

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)

这是我的减速机：

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

Answer 1

github上存在问题。

https://github.com/facebook/react-native/issues/7720

由于最近提交了本地回购协议，如果您的navigationState没有改变，他将不会重新渲染。

React Native NavigationExperimental Redux renderScene只执行一次，不刷新更新的道具

1 个答案: