Реагируйте на собственные кнопки HeaderRight внутри навигатора - PullRequest
Новая
       15

Реагируйте на собственные кнопки HeaderRight внутри навигатора

0 голосов
/ 24 октября 2019

Я хочу отобразить две кнопки в опциях headerRight nav, однако, кажется, что response-navigation-header-buttons не позволяет использовать несколько компонентов кнопки заголовка только одну. Я хочу управлять некоторым состоянием с одним компонентом, который не работает, так как я нахожусь в моем файле навигатора / ловушки не работают, так как это не функциональный компонент.

Документы :

Этот подход , очевидно, не будет работать: 

headerRight: (
<HeaderButtons HeaderButtonComponent={SoundButton}>
  <Item
    title="Sound" //key
    color="white"
  />
</HeaderButtons>
<HeaderButtons HeaderButtonComponent={ShareButton}>
   <Item
     title="Share" //key
     color="white"
   />
</HeaderButtons>
),

Ни этот подход : 

headerRight: (
<HeaderButtons>
      <Item
        title="Sound" //key
        color="white"
        ??? component to call - ButtonElement = ?
      />
      <Item
        title="Share" //key
        color="white"
         ??? component to call - ButtonElement = ?
      />
</HeaderButtons>
)

SoundButton : 

//React Deps
import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { useDispatch, useSelector } from "react-redux";

//Store
import * as soundActions from "../store/actions/sound-action";

//Misc
import { Ionicons } from "@expo/vector-icons";

const CustomHeaderButton = props => {
const sound = useSelector(state => state.sound.soundState);

const dispatch = useDispatch();

const soundButton = () => {
  dispatch(soundActions.toggleSound(sound));
};

  return (
    <HeaderButton
      {...props}
      IconComponent={Ionicons}
      iconSize={23}
      iconName={sound === "playing" ? "ios-volume-high" : "ios-volume-off"}
      onPress={soundButton}
    />
  );
};

export default CustomHeaderButton;

ShareButton: 

//React Deps
import React from "react";
import { Share } from "react-native";
import { HeaderButton } from "react-navigation-header-buttons";

//Misc
import { Ionicons } from "@expo/vector-icons";

const CustomHeaderButton = props => {

  const shareButton = async () => {
    try {
      const result = await Share.share({
        message:
          "Message"
      });

      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      console.log(error.message);
    }
  };

  return (
    <HeaderButton
      {...props}
      IconComponent={Ionicons}
      iconSize={23}
      iconName="md-share"
      onPress={shareButton}
    />
  );
};

export default CustomHeaderButton;

Хотите знать, какие альтернативы яимеют? Спасибо

Ответы [ 2 ]

3 голосов
/ 24 октября 2019

Мое плохое простое решение, предоставленное @Gaurav Roy. Просто изменил мои компоненты, чтобы они были нестандартными и не зависели от компонента HeaderButtons. 

 headerRight: (
 <View style={{flexDirection:"row"}}>
  <ShareButton />
  <SoundButton />
 </View>
 )

Спасибо

2 голосов
/ 24 октября 2019

Вы можете достичь чего-то подобного,

Компонент заголовка, и вы можете добавить столько же компонентов в заголовок: 

export default class ProAppHeader extends Component {
render() {
    return (
      <View style={{
        shadowColor: 'rgba(89, 89, 89,0.2)',
        shadowOffset: {
          width: 40,
          height: 40
        },
        shadowRadius: 40,
        elevation:10
      }}>
      <Header>
        <Left style={{ flex: 1 }}>
          <Button transparent onPress={() => this.handleBackClick()}> // here you can use this.props.navigation.goBack() 
            <Icon name='arrow-back' />
          </Button>
        </Left>
        <Body>
          <Title>{this.props.title}</Title>
        </Body>
        <View style={{ flex: 1 }} />
      </Header>
      </View>
    );
  }

}

и в ваш обычный класс, где вы хотите заголовки, просто импортируйте класс и используйте его наверху. 

<ProAppHeader title="Profile" navigation={this.props.navigation} />
...