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

Question

虽然我有这样的平面导航

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

class 每次导航到 RoadObjectScreen 时都会渲染。

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

}

但是当我嵌套屏幕时，它停止渲染，只有一个在应用程序开始时。所以 console.log('Navigation:', this.props.navigation);只弹出一次。

const MainNavigator = TabNavigator({

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

为什么会这样？如何让它呈现并使 this.props.navigation 可访问。谢谢！

Answer 1

在 TabNavigator 中，当安装导航器时选项卡会呈现一次，因此当您在选项卡之间切换时，屏幕将不会呈现第二次。

虽然它们没有第二次呈现，但您仍然可以在 class 中访问 this.props.navigation。

如果您希望仅当您切换到该选项卡时才呈现您的选项卡，您可以使用 lazy 属性。这将使您的选项卡在切换时呈现，但它们只会呈现一次，除非该屏幕的状态或道具有任何变化。

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

Not rendered nested screen by react-navigation

reactjs

react-native

react-navigation