Question

我正在开展react-native项目，最近从0.26升级到0.30。 NavigationExperimental 收到了相当多的更改，特别是在命名（NavigationRoute，NavigationState，...）和onNavigate NavigationCardStack方法的更改方面变为onNavigateBack。

我正在使用流程 0.27.0来检查我的代码。

所以这是我从流程获得的错误。

app/containers/MyContainer.js:99
 99:            <NavigationCardStack
                ^ props of React element `NavigationCardStack`
 67: type Props = NavigationSceneRendererProps & {
                                                 ^ property `onNavigateBack`. Property not found in. See: node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js:67
113:                {...props}
                        ^^^^^ spread of identifier `props`

app/containers/MyContainer.js:112
112:            <NavigationHeader
                ^ React element `NavigationHeader`
 67: type Props = NavigationSceneRendererProps & {
                                                 ^ property `onNavigateBack`. Property not found in. See: node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js:67
113:                {...props}
                        ^^^^^ spread of identifier `props`

这是发生错误的代码。 this.props.onNavigateBack从redux的connect方法中获取其值。

class MyContainer extends Component {
    props: Props;

    render() {
        return (
            <NavigationCardStack
                navigationState={this.props.navigationState}
                onNavigateBack={this.props.onNavigateBack}
                renderOverlay={props => this._renderNavigationHeader(props)}
                renderScene={scene => (<View />)}
                style={styles.container}
            />
        )
    }

    _renderNavigationHeader(props) {
        return (
            <NavigationHeader
                {...props}
                style={styles.header}
                textStyle={styles.title}
                renderLeftComponent={props => (<View />)}
                renderRightComponent={props => (<View />)}
                renderTitleComponent={props => (<View />)}
            />
        )
    }
}

我尝试尽可能缩短代码，注意Props我声明包含onNavigateBack的{{1}}类型。

Answer 1

好的，我明白了。我假设renderOverlay已将onNavigateBack传递给它给出的方法，但似乎并非如此。不确定，但我认为它仍然是onNavigate之前的情况。

因此修复方法是直接引用this.props.onNavigateBack而不是通过扩展运算符查看props内部。

_renderNavigationHeader(props) {
    return (
        <NavigationHeader
            {…props}
            onNavigateBack={this.props.onNavigateBack}
            style={styles.header}
            textStyle={styles.title}
            renderLeftComponent={props => (<View />)}
            renderRightComponent={props => (<View />)}
            renderTitleComponent={props => (<View />)}
        />
    )
}

未找到NavigationExperimental属性`onNavigateBack`

1 个答案: