Question

我使用Redact的React-Native中的NavigationExperimental。如果我站在场景A并推动场景B一切都很棒。但是，如果按下标题中的后退按钮并弹出场景B并返回场景A，则首先渲染场景A，然后渲染场景B，然后渲染场景A.我通过在{{1}中添加console.log()来检查} 方法。这是React-Native中的正常行为还是我的实现错了？

继承人场景A：

render

继承人场景B：

class Home extends Component {

render() {

    return (
        <View style={{ flex: 1 }}>
           <TouchableHighlight onPress={this.props.onPress}>
            <Text>Go to about</Text>
           </TouchableHighlight>
        </View>
    )
}

export default Home;

这是处理导航的类：

class About extends Component {
render() {
    return (
        <View style={{ flex: 1 }}>
            <Text>Hello from About</Text>
        </View>
    )
}

export default About;

编辑：添加了我的navigationReducer和navigationActions：

class App extends Component {
constructor(props) {
    super(props);
    this._renderHeader = this._renderHeader.bind(this);
    this._renderScene = this._renderScene.bind(this);
    this._navigatePush = this._navigatePush.bind(this);
    this._navigatePop = this._navigatePop.bind(this);
    this._renderHeader = this._renderHeader.bind(this);
    this._renderTitle = this._renderTitle.bind(this);
}

render() {
    return (
        <NavigationCardStack
            navigationState={this.props.navigation}
            onNavigate={this._navigatePush}
            renderScene={this._renderScene}
            renderHeader={this._renderHeader}
            />
    )
}

_renderHeader(props) {
        return <NavigationHeader {...props} renderTitleComponent={this._renderTitle} onNavigateBack={this._navigatePop} />
}

_renderTitle(props) {
    return <NavigationHeader.Title>{props.scene.route.title}</NavigationHeader.Title>
}

_renderScene(props) {
    const key = props.scene.route.key;

    switch (key) {
        case 'Home':
            return <Home onPress={() => this._navigatePush({ key: 'About', title: 'About' })} />
        case 'About':
            return <About />
    }
}

_navigatePush(scene) {
    this.props.navigationActions.pushRoute(scene);
}

_navigatePop() {
    this.props.navigationActions.popRoute()
}

Answer 1

没关系，这是一个已知的NavigationExperimental问题。 https://github.com/facebook/react-native/blob/c8a7f9e2d1618b5feea68915b5e2e4f12247ceed/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js#L258

这是每次推/弹或做其他事情时每个场景中都会调用渲染的行。

但您可以使用<NavigationTransitioner />

构建自己的导航堆栈

但是这样做请参考这个问题。 https://github.com/facebook/react-native/issues/10835。

如果您不知道如何构建自己的导航，可以看到NavigationCardStack文件并查看内容他们在那里做了。

NavigationExperimental：场景的流行导致弹出场景的重新渲染

1 个答案: