react-native - 将导航 Prop 从父组件传递到子组件

Question

我正在开发一个从 App.js 开始的应用程序。如果用户正在使用应用程序，则第一次呈现 LoginScreen，如果用户已经登录，则呈现 HomeScreen。

这是我的App.js，

export default class App extends Component{

    state = {
        isFirstTime: true,
    }

    renderIf(condition, content) {
        if (condition) {
            return content;
        } else {
            return null;
        }
    }

    render(){
        const { navigate } = this.props;
        return(
            <View style = {{flex: 1}} >
                {
                    this.renderIf(this.state.isFirstTime, <LoginScreen />)
                }
                {
                    this.renderIf(!this.state.isFirstTime, <HomeScreen />)
                }
            </View>
        );
    }
}

但是现在当我尝试使用 StackNavigator 从 LoginScreen 导航到 HomeScreen 时，我收到一个错误，即，

Cannot read property 'navigate' of undefined

所以，我的简单问题是如何将 props 从父组件传递到子组件。那就是我想传递 this.props.navigation 从 App.js 到 LoginScreen.js

Answer 1

当你渲染你的组件时，就像这样传递它<LoginScreen navigate={this.props.navigate} />

在您的组件登录屏幕上，您可以使用 const navigate = this.props.navigate; 获取它