类型错误：未定义不是对象（评估“_this2.props.navigation.navigate”）

Question

I've already read react native navigation docs but couldn't find any solution

I want to send props using children, but I got this error when navigating (onPress)

album.js

const StackAlbum = createStackNavigator()

class Album extends Component {
    constructor(props) {
        super(props)
        this.state = {
            albums: [],
            photo: []
        }
    }

componentDidMount() {
    // Get data from link then set state
    fetch("https://jsonplaceholder.typicode.com/albums")
        .then(res => res.json())
        .then(jsonRes => this.setState({
            albums: jsonRes
        }))
        .catch(err => console.log(err))

}

render() {
    return (
        <StackAlbum.Navigator
            initialRouteName="AlbumScreen"
        >
            <StackAlbum.Screen
                name="AlbumScreen"                    
                children={() => <AlbumScreen
                                    albums={this.state.albums} //HERE WE GO
                                />}               
            />
            <StackAlbum.Screen
                name="PhotoScreen"
                component={PhotoScreen} 
                options={{
                    headerShown: true
                }}               
            />
        </StackAlbum.Navigator>
    )
    }
}

export default Album

albumScreen.js

render() {
    return (
        <ScrollView>
            <Text>Albums</Text>
            <TouchableOpacity
                style={styles.button}
                onPress={() => this.props.navigation.navigate("PhotoScreen")} // HERE IS THE ERROR
            >
                <Text>Go To Photo</Text>
            </TouchableOpacity>
            <View>
                {this.showAlbum()}
            </View>                
        </ScrollView>
    )
}

I've tried using component={AlbumScreen} but confused to send props. anyone has solution?

Answer 1

Here's how to pass props to a screen from navigator:

<StackAlbum.Screen name="AlbumScreen">
  {props => <AlbumScreen{...props} albums={this.state.albums} />}
</StackAlbum.Screen>