Question

我想基于redux属性动态隐藏导航标题。这是我的代码。

let contacts = [];

function getInitialState() {
    return {
        contacts: contacts,
        selectedContact: contacts[0],
        editView: false,
        loaderView: true,
        mensaje: null,
        status: null,
        contact: {
            id: new Date(),
            firstName: '',
            avatar: `${apiUrl.apiUrl}/images/no-photo.jpg`,
            lastName: '',
            mobile: '',
            home: '',
            email: '',
            name: '',
            company: '',
            work: '',
            note: '',
        },
    };
}


export default function contactReducer(state = getInitialState(), action) {
    state =  Object.assign({}, state, {mensaje: null, status:null});

    switch (action.type) {
        ...
        case contactActions.EDIT_CONTACT:
            return Object.assign({}, state, {
                contacts: contacts,
                selectedContact: action.selectedContact
            });
        ...
        default:
            return state;
    }
}

export { contacts };

params.mainFeedIsLoading未更新为false，因此始终为true。所以，标题始终为空。

 // navigation options
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    console.log(params.mainFeedIsLoading);

    if (
      typeof params.mainFeedIsLoading !== undefined ||
      params.mainFeedIsLoading === true
    ) {
      return {
        header: null
      };
    }

    return {
      headerTitle: <Logo type="default_logo" />,
      headerTitleStyle: { alignItems: "center" },
      headerMode: "screen",
      headerStyle: {
        paddingRight: 10,
        paddingLeft: 10
      },
      headerLeft: (
        <ClickableIcon
          source={NotificationInactive}
          height={35}
          width={35}
          onIconPressed={() => alert("Notifications Clicked")}
        />
      ),
      headerRight: (
        <ClickableIcon
          height={35}
          width={35}
          source={AddNewUserInactive}
          onIconPressed={() => alert("Add New Clicked")}
        />
      )
    };
  };
}

这里，mainFeedIsLoading变为false，但在params.mainFeedIsLoading中不受影响。我怎样才能做到这一点？

Answer 1

this.props.navigation.setParams({ key: value });

将此放在componentWillReceiveProps（nextProps）中，或者每当您想要更新导航道具时。并且有条件地你可以渲染标题。检查setParams和render头中使用的'key'的条件。我希望这会有所帮助。

在react-native中动态隐藏导航头

1 个答案: