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,
  },
});

export default Tabs;

| |<

 

CRNAだけの仕様なのか

export constが出来ない？

Mac欲しい

NativeBaseの<Text>は不要だ

react-nativeでデザインをするときに、便利なのがnativebase

デザインだけでなく、あらゆる記述を簡略化してくれるため、（ちょっとしたListViewなどはNativeBaseのコンポーネントを使うと簡素に書ける）重宝している。

しかし日本語のアプリを作る時は<Text>はreact-nativeからimportしたほうがいい。

 

筆者はlinuxで開発しているので、nativebaseの<Text>を使う際は

export default class Home extends React.Component {
constructor() {
super();
this.state = {
loading: true,
};
}

async componentWillMount() {
await Expo.Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf"),
});
this.setState({ loading: false });
}

render() {
if (this.state.loading){
return <Expo.AppLoading />
}
return(
<Container>

などと書かなくてはいけない。

日本語のアプリを開発する時はnativeBaseの<Text>の恩恵を受けることはないので、react-nativeの<Text>を使ったほうがよさそうだ。

 

Mac欲しい。react nativeで、動画を扱うとネイティブコードが必要になる

ReactNati部