--react-ナビゲーションタブを達成するために反応し、ネイティブの下部のナビゲーションバーには、ピットの記録を埋め

長い時間のためのカードちょうど最近始めた学習が反応し、ネイティブ、タブバーの下を達成するためにいくつかの小さなプロジェクトをやって、ようやく解決しました！

タブバーの下、によって書かれた記事の多くを達成する方法の始め、オンラインでご確認くださいreact-native-tab-navigator。このNPMパッケージが実装します。しかし、react-native-tab-navigator最後は2017年に既に更新し、維持・更新するには、no二年以上持っていません！したがって、アップデートのバージョンと反応し、react-native-tab-navigator多くの方法が達成されたとプロジェクトは、このパッケージの導入である場合は、競合の新バージョンでは、反応は、実行時エラーが見つかります。以下の場合Warning: componentWillReceiveProps has been renamed, and is not recommended for useの例：。その理由は、ということであるcomponentWillReceivePropsフックのライフサイクルが反応するように変更されましたUNSAFE_componentWillReceiveProps。ように、その反応ネイティブ・タブナビゲータアップ（2019年の記事の実際に多く、まだこのパッケージを使用）を使用しないでください。

推奨ここでは、パッケージ・ナビゲーション・タブの反応ステップです。

1.関連パッケージの導入

次の2つのコマンドのいずれかを実行します。

npm install react-native-reanimated react-native-gesture-handler react-native-screensreact-navigation react-navigation-tabs --save
yarn add react-native-reanimated react-native-gesture-handler react-native-screensreact-navigation react-navigation-tabs

導入はreact-native-reanimated、react-native-gesture-handler、react-native-screens、react-navigation5つのreact-navigation-tabs当社下部のナビゲーションバーには、最初の3つのパッケージでルートを使用するためのパッケージは、あると反応し、ネイティブ、後者の二つが関連しているルーティング関連のパッケージを、私たちは、ナビゲーションパッケージの底面です。

2.シンプル下部のナビゲーション

import React from 'react';
import { Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
// 路由  组件 HomeScreen
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}
// 路由  组件 SettingsScreen
class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}
// 生成导航栏
const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

const AppContainer = createAppContainer(TabNavigator);

class App extends React.Component {
  render(){
    return <AppContainer></AppContainer>
  }
};

export default App;

成功のショーにナビゲーションバーを見つけましたが、何のアイコンが存在しないため、設定アイコン下るを続け、少し奇妙に見えます

3.ナビゲーションアイコンの設定

導入反応するネイティブ・ベクトルのアイコンパッケージの
操作コマンドyarn add react-native-vector-iconsまたはnpm install react-native-vector-icons --save
コンフィギュレーション
プロジェクトの最初のandroid/app/build.gradle次のコードのディレクトリを追加します：

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf', 'FontAwesome' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

その後node_modules/react-native-vector-icons/Fontsにコピーされたすべてのファイル以下のフォルダandroid/app/src/main/assets/fonts次のフォルダ（そうでない場合は、フォルダを新しいフォルダがあります）。

最終ナビゲーションデモコードの導入後4。

import React from 'react';
import { Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
// 路由  组件 HomeScreen
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}
// 路由  组件 SettingsScreen
class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}
// 生成导航栏
const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = 'home'
        } else if (routeName === 'Settings') {
          iconName = `gear`;
        }
        return <Icon name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#409EFF',  // 选中项的颜色
      inactiveTintColor: '#909399', // 未选中项的颜色
    },
  }
);

const AppContainer = createAppContainer(TabNavigator);

class App extends React.Component {
  render(){
    return <AppContainer></AppContainer>
  }
};

成功しました！