Как передать навигационные реквизиты для реагирования на функцию стрелки вне класса по умолчанию, который возвращает текст при навигации по нажатию - PullRequest
Новая
       69

Как передать навигационные реквизиты для реагирования на функцию стрелки вне класса по умолчанию, который возвращает текст при навигации по нажатию

0 голосов
/ 15 октября 2019

React Native Expo App:

При рендеринге моего класса по умолчанию я сопоставляю массив, который вызывает функцию стрелки вне класса для возврата строки текста для каждого объекта. Я хотел бы пропустить навигационную опору, чтобы при нажатии этого текста перейти к другому экрану.

Моя навигация настроена правильно, так как она вызывается из сенсорной непрозрачности в другом месте рендера для перехода к другому экрану.

Я немного обрезал это, но, надеюсь, достаточно, чтобы объяснить: 

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 не является объектом: 

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

Я тогда попробовал это, который возвратил навигацию, не является функцией: 

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

Извинения, если я что-то упустил довольноbasic Я младший и совершенно новый, чтобы реагировать

Окончательное решение с благодарностью @LonelyCpp: 

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

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

1 Ответ

0 голосов
/ 15 октября 2019

реквизиты похожи на переменные назначения. Вы сделали navigation={navigate}, что означает, что CustomDialogContent получает функцию как props.navigation

, это должно работать - 

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

edit: удалено this, поскольку это функциональный компонент

...