未通过反应导航呈现嵌套屏幕

Question

While I have a flat navigation like this

const MainNavigator = TabNavigator({
  Map: { 
    screen: MapScreen
  },
  RoadObject: { 
    screen: RoadObjectScreen
  }
});

class RoadObjectScreen is rendered every time when it is navigated to.

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

}

BUT when I get screen nested, it stops to be rendered, just one at start of application. So console.log('Navigation:', this.props.navigation); popups just once.

const MainNavigator = TabNavigator({

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

Why does it happen? How get I get it rendered and get this.props.navigation accessable. Thank you!

Answer 1

In TabNavigator , tabs render once when the navigator is mounted so when you switch between tabs the screens will not be rendered a second time.

Although they are not rendering second time you can still access this.props.navigation in your class.

If you want your tabs to be rendered only when you switch to that tab, you can use lazy prop. This will make your tabs render when they are switched but they will be rendered only once unless there is any change in state or props for that screen.