TabNavigatorとStackNavigatorをネストさせるのにハマった。

react-nativeの公式ナビゲーションの、react navigationは広く使われている。

しかし、公式ドキュメントに少しわかりづらい部分があり、StackNavigatorとTabNavigatorを一緒に使うのに、大ハマリしてしまった。

stackoverflowにも同じ質問が、何回も出ているので、react-navigationを使う上で誰もが、ハマる道なんだろうか？

以下一番シンプルなサンプル

>| |

import React from 'react'
import { Text, Button, View, } from 'react-native'
import { TabNavigator, StackNavigator, } from 'react-navigation'

const TabOne = ({navigation}) => (
<Button
title='touch'
onPress = {() => navigation.navigate('UserDetail')}
/>
);

const TabTwo = () => (
<Text>Me</Text>
);

const StackOne = () => (
<Text>UserDetail</Text>
);

const FeedStack = StackNavigator({
TabOne: {
screen: TabOne,
},
StackOne: {
screen: StackOne,
},
});

const Tabs = TabNavigator({
TabOne: {
screen: FeedStack,
},
TabTwo: {
screen: TabTwo,
},
});