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

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

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

Cannot read property 'navigate' of undefined

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

Answer 1

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

在您的 Component LoginScreen 上，您可以使用const navigate = this.props.navigate;

Answer 2

您可以通过执行以下操作将导航道具从容器屏幕传递给子组件：

<LoginScreen navigation={this.props.navigation} />

然后在您的子组件中，接收它并在如下操作中使用它：

this.props.navigation.navigate('placeToGo');