が反応し、ナビゲーション

Question

により、ネストされた画面をレンダリングされません。

class RoadObjectScreen extends Component { 

static navigationOptions = ({ navigation }) => ({ 
    title: navigation.state.params && navigation.state.params.roadObject, 
    tabBarVisible: false 
}); 

render() { 
    console.log('Navigation:', this.props.navigation); 
    const { navigation } = this.props; 
    return (
     <View> 
      <Text style={{ paddingTop: 100 }} onPress={() => navigation.goBack()}> 
       Welcome to {navigation.state.params && navigation.state.params.roadObject } 
      </Text> 
     </View> 
    ); 
} 

}

をしかし、私はネストされた画面を得るとき、それは1つのアプリケーションだけの開始時に、レンダリングされるように停止します。だからconsole.log（ 'Navigation：'、this.props.navigation）;ポップアップは1回だけです。

const MainNavigator = TabNavigator({ 

    Map: { 
    screen: MapScreen, 
    navigationOptions: { 
     tabBarVisible: false 
    } 
    }, 
    RoadObjectMain: { 
    screen: StackNavigator({ 
     RoadObject: { 
     screen: RoadObjectScreen 
     } 
    }) 
    } 
}); 

どうしてですか？どのようにレンダリングしてthis.props.navigationをアクセス可能にするのですか？ ありがとうございました！

Answer 1

TabNavigatorでは、ナビゲータがマウントされたときにタブがレンダリングされるので、タブを切り替えると画面が2度目にレンダリングされません。

2度目のレンダリングは行われませんが、クラス内ではまだthis.props.navigationにアクセスできます。

タブに切り替えたときにのみタブを表示する場合は、lazy propを使用できます。これにより、タブが切り替わったときにタブがレンダリングされますが、その画面の状態や小道具に変更がない限り、タブは一度だけレンダリングされます。