如何传递导航道具以在默认 class 之外反应箭头功能，returns 文本带有按下导航

Question

React Native Expo 应用程序：

在我的默认 class 渲染中，我从调用 class 之外的箭头函数的数组映射到 return 每个对象的一行文本。我想传递导航道具，以便在按下该文本时导航到另一个屏幕。

我的导航设置正确，因为它是从渲染中其他地方的可触摸不透明度调用以导航到另一个屏幕。

我已经将其剥离了很多，但希望足以解释：

const CustomDialogContent = ({name, ip, navigate}) => {
    return (
        <Text onPress={navigate('Webview')}>
            {name} ({ip})
        </Text>
    )
}

export default class HomeScreen extends React.Component { 
    constructor(props) {
        super(props);
        this.state ={
            devices: [],
            name: '',
            ip: '',
        };
    }
    static navigationOptions = {
        title: 'App',
    };
    render() {
        const {navigate} = this.props.navigation;
        return (   
            <View style={container}>
                <Dialog                   
                    <DialogContent>
                        {this.state.devices.map((device) => {
                            return (
                                <CustomDialogContent name={device.name} ip={device.ip} navigation={navigate}/>
                            );}
                    </DialogContent>
                </Dialog>
            </View>
        );
    }
}

导航未定义，而不是将我带到屏幕。我也试过这个 undefined is not an object:

const CustomDialogContent = ({name, ip}) => {
    const {navigate} = this.props.navigation;
    return (
        <Text onPress={navigate('Webview')}>
            {name} ({ip})
        </Text>
    )
}

然后我尝试了这个 returned 导航不是一个函数：

const CustomDialogContent = ({name, ip, navigate}) => {
    return (
        <Text onPress={() => {navigate('Webview')}}>
            {name} ({ip})
        </Text>
    )
}

如果我遗漏了一些非常基本的东西，我深表歉意，我是一名大三学生，对反应完全陌生

感谢@LonelyCpp 的最终解决方案：

const CustomDialogContent = props => {
    return (
      <Text onPress={() => {props.navigation('Webview');}}>
        {props.name} ({props.ip}) 
      </Text>
    );
};

<CustomDialogContent name={device.name} ip={device.ip} navigation={navigate}/>

Answer 1

props 就像变量赋值。您已经完成了 navigation={navigate}，这意味着 CustomDialogContent 获得了 props.navigation

的功能

这应该有效 -

const CustomDialogContent = (props) => {
    const navigate = props.navigation; // no {}
    return (
        <Text onPress={()=>navigate('Webview')}>
            {name} ({ip})
        </Text>
    )
}

编辑：删除 this 因为它是一个功能组件

如何传递导航道具以在默认 class 之外反应箭头功能，returns 文本带有按下导航

How to pass navigation props to react arrow function outside of default class that returns text with on press navigation

navigation

reactjs

react-native

react-props

react-component