TabNavigatorをボタンとして使用

Question

私はReact Navigationを使用しています。TabNavigatorを使用して複数のタブをナビゲートしたいとします。私が知らないのは、あるタブをボタンとして使用する可能性がある場合です。

const Tabs = TabNavigator({ 
    Tab1: { screen: Tab1 }, 
    Tab2: { screen: Tab2 }, 
    Button: {//This needs to be a button }, 
    Tab3: { screen: Tab3 }, 
    Tab4: { screen: Tab4 }, 
}, 
{ 
    //some TabBarOptions 
} 

私はボタンで画面の小道具を除外し、<Touchable>でラップしようとしましたが、私は、画面を定義する必要がエラーを取得します。あなただけのtabBarComponentプロパティでタブを設定することでボタンとして設定]タブをできた

|-----|-----|-----|-----|-----| 
|Tab 1|Tab 2| But |Tab 3|Tab 4| 
|-----|-----|-----|-----|-----| 

Answer 1

。

この

は、ネイティブ・ベースの例である（ui library for react native）ドキュメント： ネイティブベース

あなたはちょうどあなたが好きなものをやって、ボタンの onPress()方法を変更することができ

export default (MainScreenNavigator = TabNavigator(
    { 
    LucyChat: { screen: LucyChat }, 
    JadeChat: { screen: JadeChat }, 
    NineChat: { screen: NineChat } 
    }, 
    { 
    tabBarPosition: "bottom", 
    tabBarComponent: props => { 
     return (
     <Footer> 
      <FooterTab> 
      <Button 
       vertical 
       active={props.navigationState.index === 0} 
       onPress={() => alert("Do something")}> //this is the change 
       <Icon name="bowtie" /> 
       <Text>Button</Text> 
      </Button> 
      <Button 
       vertical 
       active={props.navigationState.index === 1} 
       onPress={() => props.navigation.navigate("LucyChat")}> 
       <Icon name="bowtie" /> 
       <Text>Lucy</Text> 
      </Button> 
      <Button 
       vertical 
       active={props.navigationState.index === 2} 
       onPress={() => props.navigation.navigate("JadeChat")}> 
       <Icon name="briefcase" /> 
       <Text>Nine</Text> 
      </Button> 
      <Button 
       vertical 
       active={props.navigationState.index === 3} 
       onPress={() => props.navigation.navigate("NineChat")}> 
       <Icon name="headset" /> 
       <Text>Jade</Text> 
      </Button> 
      </FooterTab> 
     </Footer> 
    ); 
    } 
    } 
));