Question

虽然我有像这样的平面导航

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

类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中，当导航器安装时，标签会渲染一次，因此当您在标签之间切换时，屏幕将不会再次渲染。

虽然他们没有第二次渲染，但您仍可以在班级中访问this.props.navigation。

如果您希望仅在切换到该标签时呈现标签，则可以使用lazy道具。这将使您的标签在切换时呈现，但除非该屏幕的状态或道具发生任何变化，否则它们只会呈现一次。

不通过react-navigation渲染嵌套屏幕

1 个答案: