根据一个参数修改header

Question

我试图根据同一组件的状态中的一个参数修改我的自定义 header。但我看到它不起作用。我可以在渲染中做同样的事情，它显然可以，但我怎么能在 header 中做呢？

例如，在这种情况下，如果 itemNumber > 0

，我想将按钮换成另一个

    ...    
    static navigationOptions = ({ navigation }) => {
            return{
                title: "Edit Group"+' ',
                headerStyle: {
                    backgroundColor: '#2ca089',
                    elevation: 0,
                    shadowOpacity: 0,
                    borderBottomWidth: 0,
                },
                headerTintColor: '#fff',
                headerRight: (
                    <Button hasText transparent onPress={() => 
                         Alert.alert(
                            "Delete Group",
                            "Are you sure you want to delete this group? It is a non-reversible action!",
                            [
                              {text: 'Yes', onPress: () => console.log('Yes Pressed')},
                              {text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel'},
                            ],

                        )
                    }>
                        <Text>Delete Group</Text>
                    </Button>
                ),
            };
        }    

        constructor(props) {
            super(props)
            this.state = {
                dataSource : [],
                text : '',
                itemNumber : 0,
            }
        }
    ...

我知道因为它是一个静态组件，所以不会动态修改，但我不知道如何以其他方式进行修改。

谢谢，

Answer 1

您可以将多个参数传递给导航器，如：

From Calling Container/Component

this.props.navigation.navigate('navigator-destination', {
     title: 'Your Title',
     label: 'Extra Params',
     callback: callback // Even callback
});

In Called Container/Component

static navigationOptions = ({navigation}) => {
        const {state} = navigation;
        label = state.params.label;
        return {
            title: `${state.params.title}`,
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
       };
  };

To call callback:

 _someMethod = () => {
        const {navigation} = this.props;

        navigation.state.params.callback(parameters);
        navigation.goBack();
    };

Answer 2

我看不出 TNC 的答案在哪里实现了 headerRight 中的回调函数，以便 re-update 导航 header 我认为这是问题所在。

我的解决方案如下：

The variable which you want to observe is itemNumber, make sure is in the constructor ✅

constructor(props) {
    super(props)
    this.state = {
        dataSource : [],
        text : '',
        itemNumber : 0,
        selectedItems: []
    }
}

Then, inside the function which you trigger the event which requires the update for the header add the following code:

triggerFunction = parameters => {
    //...
    let newValue = 1 //Implement your logic
    this.setState(({itemNumber}) => {
        this.props.navigation.setParams({itemNumber: newValue})
        return {itemNumber: newValue }
    });    
    //...
};

To conclude, on the navigationOption add the following code:

static navigationOptions = ({ navigation }) => {

    return{
        headerRight: 
                navigation.getParam('itemNumber', 0) > 0 
                ?  

                <Button hasText transparent onPress={() => 
                    Alert.alert(
                        "Delete User",
                        "Are you sure you want to delete this user/users? It is a non-reversible action!",
                        [
                        {text: 'Yes', onPress: () => console.log('Yes Pressed')},
                        {text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel'},
                        ],

                    )
                }>
                    <Text>Delete Users</Text>
                </Button> 
                : 
                null
    };
 }

我从这个答案中得到了启发：

https://whosebug.com/a/51911736/5288983

我还附上了文档，您可以在其中更好地理解该方法：

https://reactnavigation.org/docs/en/headers.html#setting-the-header-title

根据一个参数修改header

Modify header according to one parameter

react-native

native-base