ネストされたTabnavigatorに小道具を渡します

Question

私は現在3ヶ月間反応ネイティブで作業していますが、何も解決せずにこの問題が数日間発生しています。

問題： StackNavigator内にネストされたTabNavigatorがあります。これらのナビゲーターのどちらも、ステートレスなコンポーネント内にある：コンポーネントの

const MyStackNav = StackNavigator({ 
    Tabs:{ 
    screen: TabNavigator({ 
     Tab1: { screen: TabScreen1}, 
     Tab2: { screen: TabScreen2}, 
     Tab3: { screen: TabScreen3}, 
     ...(CONDITION ? { Tab4: { 
      screen: TabScreen4 
     }} : {}) 
     }) 
    } 
    StackScreen1:{ 
    screen: StackScreenOne, 
    }, 
    StackScreen2:{ 
    screen: StackScreenTwo, 
    }, 
}) 

呼び出し：

class MainApp extends React.Component { 

    constructor(props) 
    { 
    super(props); 

    this.state = { 
     condition: false, 
    }; 
    } 

    render() { 
    return (
     <MyStackNav/> 
    ); 
    } 
} 

はどのようにして、条件のためMyNavStackコンポーネント内の状態変数に私のクラスMainAppから条件を渡すことができますレンダリング？ したがって、CONDITIONがtrueの場合にのみ、Tab4をレンダリングする必要があります。

クラスMainAppの小道具を、たとえば最初のタブ画面に渡すにはどうすればよいですか？

ありがとうございます！で<MyStackNav condition={this.state.condition} />

MyStackNavあなたが言うことができる：

Answer 1

あなたはあなたのような性質をMyStackNavを与えることができますが、小道具を伝承するために、React.component作成する必要はありません

const MyStackNav = props => StackNavigator({ 
    Tabs:{ 
    screen: TabNavigator({ 
     Tab1: { screen: TabScreen1}, 
     Tab2: { screen: TabScreen2}, 
     Tab3: { screen: TabScreen3}, 
     ...(props.condition? { Tab4: { 
      screen: TabScreen4 
     }} : {}) 
     }) 
    } 
    StackScreen1:{ 
    screen: StackScreenOne, 
    }, 
    StackScreen2:{ 
    screen: StackScreenTwo, 
    }, 
}) 

。

また、あなたはコンポーネントでもう少しやってみたい場合には、それを少し広げることができます。

const MyStackNav = (props) => { 
     const { condition } = props; 
     return StackNavigator({ 
      Tabs: { 
       screen: TabNavigator({ 
        Tab1: { 
         screen: TabScreen1 
        }, 
        Tab2: { 
         screen: TabScreen2 
        }, 
        Tab3: { 
         screen: TabScreen3 
        }, 
        ...(condition ? { 
         Tab4: { 
          screen: TabScreen4 
         } 
        } : {}) 
       }) 
      } 
      StackScreen1: { 
       screen: StackScreenOne, 
      }, 
      StackScreen2: { 
       screen: StackScreenTwo, 
      }, 
     }) 
} 

を