Help us understand the problem. What is going on with this article?

【React Native】Header Navigationでヘッダータイトル(Header Title)にコンポーネントを渡す方法

こんにちは!
最近はパソコンを持たない大学生も多いみたいですね。
パソコンを持たない=スマホで完結
スマホアプリの需要の変化についても、気になるこの頃です。

さて、今回は「React NativeHeader Navigationでヘッダータイトル(Header Title)にコンポーネントを渡す方法」について、お伝えしていきたいと思います。

header_title(コンポーネント).gif

(復習)React Navigationtitleに任意の値を与える方法

export default function SplashScreen() {
  function HomeScreen({navigation}) {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Home Screen!!</Text>
      </View>
    );
  }

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{headerTitle: 'title'}}
      />
    </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems:'center',
    justifyContent:'center',
  },
  text: {
    fontSize: 50,
  },
});

※importなどの記述は省略しています。

結果は・・・

ヘッダータイトルに任意の値(title)を設定することができました。

React Navigationtitleにコンポーネントを渡す方法

ここから本題です。
ヘッダータイトルにコンポーネントを設定してみたいと思います。

例として、ヘッダータイトルをタップすると、アラートが表示されるようにしてみます。

export default function SplashScreen() {
  function HomeScreen({navigation}) {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Home Screen!!</Text>
      </View>
    );
  }

  // ヘッダータイトルコンポーネント
  const title = () => {
    return (
      <TouchableOpacity onPress={() => alert('headerTitle Tapped')}>
        <Text>Title Component</Text>
      </TouchableOpacity>
    );
  };
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        // ここで、headerTitleにtitleコンポーネントを渡してあげます。
        options={{headerTitle: title}}
      />
    </Stack.Navigator>
  );
}

結果は・・・
header_title(コンポーネント).gif

これで、タイトルに独自のコンポーネントを設定することができました!

もちろんヘッダータイトルに画像を設定したりもできます。

参考資料

https://stackoverflow.com/questions/51986916/using-a-component-as-a-header-title-in-react-navigation

choco_p
webエンジニア歴6ヶ月。SIer歴3年。 React Nativeでスマホアプリ作っています。 最近はデザインやマーケにも少し興味があります。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした