道具没有传递到反应本机中的另一个组件

Question

When I pass a function as props to another component its not appearing in that component

I tried to create a dummy component just below the parent component the props is getting passed. When i try to pass to a component which is imported it doesn't get passed. I am using stack navigator to route, i don't know if its the reason that the props which i pass is not getting displayed.

import React from 'react'
import {View, Text, TouchableOpacity, Image, StyleSheet, Dimensions, TouchableWithoutFeedback} from 'react-native'

import DrawNavContents from './DrawNavContents'
import Practice from './Practice'

let width = Dimensions.get('window').width
let height = Dimensions.get('window').height

class DrawNav extends React.Component { 
    constructor(){
        super()
        this.state = {
            toggleDrawer: false,
            imgPos: 30
      }
  }

toggle = () => {
    this.setState(() => ({
        toggleDrawer: !this.state.toggleDrawer,
        imgPos: this.state.imgPos == 30 ? 300 : 30
    }))
}

render () {
    return (
        <View>
            <TouchableOpacity onPress={this.toggle}>
                <Image
                    source={require('../../images/drawer-150x150.png')}
                    style={{ width: 25, height: 25, marginLeft: this.state.imgPos }}
                    onPress= {this.toggle}
                />
            </TouchableOpacity>

            { 
                this.state.toggleDrawer && (
                    <View style={styles.menu}>
                        <DrawNavContents />
                    </View>
                )
            }
            <Practice toggle={this.toggle}/>
        </View>
        )
    }
}

const styles = StyleSheet.create({
    menu: {
        flex: 1,
        backgroundColor: 'yellow',
        position : 'absolute',
        left: 0,
        top: 0,
        width : width * 0.8, 
        height : height,
        paddingTop : 10,
        paddingLeft : 10,
        paddingRight : 10,
        paddingBottom : 10
    },
})

export default DrawNav

This is Practice.js file:

import React from 'react'
import {View, Text} from 'react-native'

class Practice extends React.Component{
    render(){
        console.log("this is props", this.props)
        return(
            <View>
                <Text>hello</Text>
            </View>
        )
    }
}

export default Practice

This is the console.log output I am getting:

"Object {screenProps: undefined, navigation: Object}"

The "toggle" which I have passed is not appearing

Answer 1

You need to pass props in the constructor. For more details visit here https://reactjs.org/docs/react-component.html#constructor

The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

import React from 'react'
import {View, Text, TouchableOpacity, Image, StyleSheet, Dimensions, TouchableWithoutFeedback} from 'react-native'

import DrawNavContents from './DrawNavContents'
import Practice from './Practice'

let width = Dimensions.get('window').width
let height = Dimensions.get('window').height

class DrawNav extends React.Component { 
    constructor(props){
        super(props)
        this.state = {
            toggleDrawer: false,
            imgPos: 30
      }
  }

toggle = () => (
this.setState((prevState) => ({
        toggleDrawer: !prevState.toggleDrawer,
        imgPos: prevState.imgPos == 30 ? 300 : 30
    }))
)

render () {
    return (
        <View>
            <TouchableOpacity onPress={this.toggle}>
                <Image
                    source={require('../../images/drawer-150x150.png')}
                    style={{ width: 25, height: 25, marginLeft: this.state.imgPos }}
                    onPress= {this.toggle}
                />
            </TouchableOpacity>

            { 
                this.state.toggleDrawer && (
                    <View style={styles.menu}>
                        <DrawNavContents />
                    </View>
                )
            }
            <Practice toggle={this.toggle}/>
        </View>
        )
    }
}

const styles = StyleSheet.create({
    menu: {
        flex: 1,
        backgroundColor: 'yellow',
        position : 'absolute',
        left: 0,
        top: 0,
        width : width * 0.8, 
        height : height,
        paddingTop : 10,
        paddingLeft : 10,
        paddingRight : 10,
        paddingBottom : 10
    },
})

export default DrawNav

Answer 2

Error -1 : You need to pass navigation also to access that in different screen.

import React from 'react'
import {View, Text, TouchableOpacity, Image, StyleSheet, Dimensions, TouchableWithoutFeedback} from 'react-native'

import DrawNavContents from './DrawNavContents'
import Practice from './Practice'

let width = Dimensions.get('window').width
let height = Dimensions.get('window').height

class DrawNav extends React.Component { 
    constructor(){
        super()
        this.state = {
            toggleDrawer: false,
            imgPos: 30
      }
  }

toggle = () => {
    this.setState(() => ({
        toggleDrawer: !this.state.toggleDrawer,
        imgPos: this.state.imgPos == 30 ? 300 : 30
    }))
}

render () {
    return (
        <View>
            <TouchableOpacity onPress={this.toggle}>
                <Image
                    source={require('../../images/drawer-150x150.png')}
                    style={{ width: 25, height: 25, marginLeft: this.state.imgPos }}
                    onPress= {this.toggle}
                />
            </TouchableOpacity>

            { 
                this.state.toggleDrawer && (
                    <View style={styles.menu}>
                        <DrawNavContents />
                    </View>
                )
            }
            <Practice 
navigation={this.props.navigation}
toggle={this.toggle}/>
        </View>
        )
    }
}

const styles = StyleSheet.create({
    menu: {
        flex: 1,
        backgroundColor: 'yellow',
        position : 'absolute',
        left: 0,
        top: 0,
        width : width * 0.8, 
        height : height,
        paddingTop : 10,
        paddingLeft : 10,
        paddingRight : 10,
        paddingBottom : 10
    },
})

export default DrawNav

Basically you need to add this line instead of your old code.

<Practice 
navigation={this.props.navigation}
toggle={this.toggle}/>