Reactjs 道具未传递到react native中的另一个组件

当我将一个函数作为道具传递给另一个组件时，它不会出现在该组件中

我试图在道具通过的父组件下方创建一个虚拟组件。当我试图传递给导入的组件时，它没有被传递。我正在使用stack navigator进行布线，我不知道这是否是我通过的道具没有显示的原因

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

从“React”导入React
从“react native”导入{View，Text，TouchableOpacity，Image，StyleSheet，Dimensions，TouchableWithoutFeedback}
从“./DrawNavContents”导入DrawNavContents
从“/Practice”导入实践
让宽度=尺寸。获取（'window'）。宽度
让高度=尺寸。获取（'窗口'）。高度
类DrawNav扩展React.Component{
构造函数（）{
超级（）
此.state={
切换抽屉：错误，
imgPos:30
}
}
切换=（）=>{
此.setState（（）=>({
toggleDrawer:！this.state.toggleDrawer，
imgPos:this.state.imgPos==30？300:30
}))
}
渲染（）{
返回(
{ 
this.state.toggleDrawer&&(
)
}
)
}
}
const styles=StyleSheet.create({
菜单：{
弹性：1，
背景颜色：“黄色”，
位置：'绝对'，
左:0,，
排名：0，
宽度：宽度*0.8，
高度:高度,，
paddingTop:10，
paddingLeft:10，
paddingRight:10，
垫底：10
},
})
导出默认DrawNav

这是Practice.js文件：

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

从“React”导入React
从“react native”导入{View，Text}
课堂实践扩展了React.Component{
render（）{
log（“这是props”，这是props）
返回(
你好
)
}
}
导出默认做法

这是我得到的console.log输出：

对象{屏幕支柱：未定义，导航：对象}

我通过的“切换”没有出现

---

您需要在构造函数中传递道具。欲了解更多详情，请访问此处

React组件的构造函数在装入之前被调用。在实现React.Component子类的构造函数时，应该在调用任何其他语句之前调用super（props）。否则，构造函数中将未定义this.props，这可能会导致错误。

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

从“React”导入React
从“react native”导入{View，Text，TouchableOpacity，Image，StyleSheet，Dimensions，TouchableWithoutFeedback}
从“./DrawNavContents”导入DrawNavContents
从“/Practice”导入实践
让宽度=尺寸。获取（'window'）。宽度
让高度=尺寸。获取（'窗口'）。高度
类DrawNav扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
切换抽屉：错误，
imgPos:30
}
}
切换=（）=>(
this.setState（（prevState）=>({
toggleDrawer:！prevState.toggleDrawer，
imgPos:prevState.imgPos==30？300:30
}))
)
渲染（）{
返回(
{ 
this.state.toggleDrawer&&(
)
}
)
}
}
const styles=StyleSheet.create({
菜单：{
弹性：1，
背景颜色：“黄色”，
位置：'绝对'，
左:0,，
排名：0，
宽度：宽度*0.8，
高度:高度,，
paddingTop:10，
paddingLeft:10，
paddingRight:10，
垫底：10
},
})
导出默认DrawNav

错误-1：您还需要传递导航才能在不同的屏幕中访问它

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

从“React”导入React
从“react native”导入{View，Text，TouchableOpacity，Image，StyleSheet，Dimensions，TouchableWithoutFeedback}
从“./DrawNavContents”导入DrawNavContents
从“/Practice”导入实践
让宽度=尺寸。获取（'window'）。宽度
让高度=尺寸。获取（'窗口'）。高度
类DrawNav扩展React.Component{
构造函数（）{
超级（）
此.state={
切换抽屉：错误，
imgPos:30
}
}
切换=（）=>{
此.setState（（）=>({
toggleDrawer:！this.state.toggleDrawer，
imgPos:this.state.imgPos==30？300:30
}))
}
渲染（）{
返回(
{ 
this.state.toggleDrawer&&(
)
}
)
}
}
const styles=StyleSheet.create({
菜单：{
弹性：1，
背景颜色：“黄色”，
位置：'绝对'，
左:0,，
排名：0，
宽度：宽度*0.8，
高度:高度,，
paddingTop:10，
paddingLeft:10，
paddingRight:10，
垫底：10
},
})
导出默认DrawNav

基本上，您需要添加这一行而不是旧代码

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

您能为此创建一个代码笔吗？尝试使用超级道具在子组件中添加构造函数。谢谢您的回复@ravibagul91@AjayGhosh . 如果你仔细阅读引用的文本，你就会知道，当你想在

构造函数中使用
this.props
时，你只需要调用
super（props）
。对于通过的
道具
，情况并非如此。