Реагировать заголовок навигации в функциональных компонентах с крючками - PullRequest
Новая
       15

Реагировать заголовок навигации в функциональных компонентах с крючками

3 голосов
/ 17 апреля 2019

Я пытаюсь внедрить пользовательские заголовки в React функциональных компонентов, использующих хуки.

Так, например, у меня есть следующий функциональный компонент React с некоторыми хуками: 

function StoryHome(props) {
  const [communityObj, setCommunityObj] = useState({
    uid: null,
    name: null,
  });
...
}

StoryHome.navigationOptions = {
  title: 'Stories',
  headerTitleStyle: {
    textAlign: 'left',
    fontFamily: 'OpenSans-Regular',
    fontSize: 24,
  },
  headerTintColor: 'rgba(255,255,255,0.8)',
  headerBackground: (
    <LinearGradient
      colors={['#4cbdd7', '#3378C3']}
      start={{ x: 0, y: 1 }}
      end={{ x: 1, y: 1 }}
      style={{ flex: 1 }}
    />
  ),
  headerRightContainerStyle: {  
    paddingRight: 10,   
  },    
  headerRight: (    
    <TouchableOpacity onPress={navigation.navigate('storiesList')}> 
      <Ionicons 
         name="ios-search-outline"  
         size={25}  
         color="white"  
         left={20}  
       />   
    </TouchableOpacity>
  )
};

export default StoryHome;

Так что этот вид работ, кроме части TouchableOpacity.

Во-первых, я не могу правильно отобразить Ionicon, а во-вторых, у меня нет доступа к объекту navigation вне функционального компонента.

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

1 Ответ

6 голосов
/ 17 апреля 2019

navigationOptions может быть функцией, которая получает объект в качестве аргумента с navigation в качестве свойства.

Вам также необходимо убедиться, что вы присвоили функции onPress, и что вы не 't вызвать navigation.navigate напрямую. 

StoryHome.navigationOptions = ({ navigation }) => ({
  title: "Stories",
  headerTitleStyle: {
    textAlign: "left",
    fontFamily: "OpenSans-Regular",
    fontSize: 24
  },
  headerTintColor: "rgba(255,255,255,0.8)",
  headerBackground: (
    <LinearGradient
      colors={["#4cbdd7", "#3378C3"]}
      start={{ x: 0, y: 1 }}
      end={{ x: 1, y: 1 }}
      style={{ flex: 1 }}
    />
  ),
  headerRightContainerStyle: {
    paddingRight: 10
  },
  headerRight: (
    <TouchableOpacity onPress={() => navigation.navigate("storiesList")}>
      <Ionicons name="ios-search" size={25} color="white" left={20} />
    </TouchableOpacity>
  )
});
...