导航实验性:场景弹出导致弹出场景的重新渲染

Question

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

这是场景 A：

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;

场景B：

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

下面是处理导航的类：

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

编辑：添加了我的导航化简器和导航操作：

//action creators
function _pushRoute(route) {
return {
    type: actionTypes.PUSH,
    route
}
function _popRoute() {
return {
    type: actionTypes.POP,
}
//thunks
export function pushRoute(route){
return (dispatch) => {
    dispatch(_pushRoute(route))
}
export function popRoute(route){
return (dispatch) => {
    dispatch(_popRoute())
}
//Reducer
initialState = {
index: 0,
key: 'root',
routes: [
    { key: 'Home', title: 'Home' }
]
}
function navReducer() {
return (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.PUSH:
            if (state.routes[state.index].key === (action.route && action.route.key)) return state
            return NavigationStateUtils.push(state, action.route);
        case actionTypes.POP:
            if (state.index === 0 || state.routes.length === 1) return state
            return NavigationStateUtils.pop(state)
        default:
            return state;
    }
}

Answer 1

没

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

这是每次按下/弹出或执行其他操作时都会在每个场景中调用渲染的行。

但是，您可以使用<NavigationTransitioner />构建自己的导航堆栈

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

如果你不知道如何构建自己的导航，你可以看看NavigationCardStack文件，看看是什么 他们在那里做到了。