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从HomeScreen导航到StackNavigator时，我收到的错误是

Cannot read property 'navigate' of undefined

所以，简单地说我的问题是如何将道具从父组件传递到子组件。我希望将this.props.navigation从App.js传递给LoginScreen.js

Answer 1

渲染组件时，只需将其传递给<LoginScreen navigate={this.props.navigate} />

在您的组件登录屏幕上

，您可以使用const navigate = this.props.navigate;

获取它

Answer 2

您可以通过以下方式将导航道具从容器屏幕传递到子组件：

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

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

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

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

2 个答案: