Изменить заголовок согласно одному параметру - PullRequest
Новая
       11

Изменить заголовок согласно одному параметру

2 голосов
/ 02 июля 2019

Я пытался изменить свой пользовательский заголовок в соответствии с одним параметром, который находится в состоянии из того же компонента. Но я вижу, что это не работает. Я могу сделать то же самое внутри рендера, и это, очевидно, делает, но как я могу сделать это в заголовке?

В этом случае, например, я хотел бы изменить кнопку на другую, если 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,
            }
        }
    ...

Я понимаю, что, поскольку это статический компонент, он не будет изменяться динамически, но я не вижу, как я могу сделать это другим способом.

Спасибо

Ответы [ 2 ]

1 голос
/ 07 июля 2019

Я не вижу, где ответ от TNC реализует функцию обратного вызова внутри headerRight для повторного обновления заголовка навигации, что, я думаю, является проблемой.

Мое решение следующее:

Переменная, которую вы хотите наблюдать: itemNumber , убедитесь, что она находится в конструкторе ✅ 

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

Затем внутри функции, которая вызывает событие, требующее обновления для заголовка , добавьте следующий код: 

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

В заключение, на navigationOption добавьте следующий код: 

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://stackoverflow.com/a/51911736/5288983

Я также прилагаю к вам документацию, где вы можете лучше понять подход:

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

1 голос
/ 02 июля 2019

Вы можете передать несколько параметров в навигатор как:

Из вызывающего контейнера / компонента 

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

В вызываемом контейнере / компоненте 

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

Для обратного вызова: 

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

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