React-Native onPress не работает при экспорте в качестве компонента

#javascript #react-native #mobile

#javascript #react-native #Мобильный

Вопрос:

Я переместил часть Instaounce.js класс в Post.js файл для повторного использования. Когда я пытаюсь создать компонент Post внутри компонента View в Instaounce, а Instaounce — внутри компонента View в App.js функциональность onPress в Post.js (Строка 38) не работает. Однако, когда я запускаю Post.js внутри компонента View из App.js при замене Instaounce функциональность мыши работает.

 import React, {
    Component
} from 'react';
import {
    Image,
    Text,
    StyleSheet,
    View,
    Dimensions,
    TouchableOpacity
} from 'react-native';
import config from "./config"
import {
    PostFeed
} from "./Src/Components/Container"
import Instaounce from "./Src/Instaounce";
import {
    Post
} from "./Src/Components/Presentation"

export default class App extends Component {
    render() {
        return ( <
            View style = {
                styles.container
            } >
            <
            Instaounce / > //onPressed functionality works when this is <Post/> 
            <
            /View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    topBar: {
        width: "100%",
        height: 70,
        backgroundColor: "rgb(246, 246, 246)",
        borderBottomColor: "rgb(200, 200, 200)",
        borderBottomWidth: StyleSheet.hairlineWidth,
        justifyContent: "center",
        alignItems: "center"
    },
    topLogo: {
        color: "rgb(0,0,0)",
        fontSize: 36,
        fontFamily: "Stembase"
    },
}); 
=== === === === === === === === === === === === === === === === === === === === === === === ==

import React, {
    Component
} from 'react';
import {
    Image,
    Text,
    StyleSheet,
    View,
    Dimensions,
    TouchableOpacity
} from 'react-native';
import config from "../config"
import {
    PostFeed
} from "./Components/Container"
import {
    Post
} from "./Components/Presentation"

class Instaounce extends Component {
    render() {
        return ( <
            View style = {
                {
                    flex: 1,
                    width: "100%",
                    height: "100%"
                }
            } >
            <
            View style = {
                styles.topBar
            } >
            <
            Text style = {
                styles.topLogo
            } > Instaounce < /Text> <
            Post / >
            <
            /View> <
            /View>
        );
    }
}

const styles = StyleSheet.create({
    topBar: {
        width: "100%",
        height: 70,
        backgroundColor: "rgb(246, 246, 246)",
        borderBottomColor: "rgb(200, 200, 200)",
        borderBottomWidth: StyleSheet.hairlineWidth,
        justifyContent: "center",
        alignItems: "center"
    },
    topLogo: {
        color: "rgb(0,0,0)",
        fontSize: 36,
        fontFamily: "Stembase"
    }
});

export default Instaounce;


=== === === === === === === === === === === === === === === === === === === === === === === =


import React, {
    Component
} from 'react';
import {
    Image,
    Text,
    StyleSheet,
    View,
    Dimensions,
    TouchableOpacity
} from 'react-native';
import config from "../../../config"

class Post extends Component {
    constructor() {
        super();
        this.state = {
            numberPressed: 0,
            liked: false,
            screenWidth: Dimensions.get("window").width
        }
    }

    likeToggled() {
        this.setState({
            liked: !this.state.liked
        })
    }

    render() {
        const likeIconColor = (this.state.liked) ? "rgb(250,60,25)" : "rgb(0,0,0)";
        return ( <
            View style = {
                {
                    flex: 1,
                    width: "100%"
                }
            } >
            <
            TouchableOpacity activeOpacity = {
                .98
            }
            onPress = {
                () => {
                    this.state.numberPressed  ;
                    if (this.state.numberPressed % 2 == 0) {
                        this.likeToggled()
                    }
                }
            } >

            <
            /TouchableOpacity> <
            View style = {
                styles.iconBar
            } >
            <
            Image style = {
                [styles.icon, {
                    height: 55,
                    width: 55,
                    tintColor: likeIconColor
                }]
            }
            source = {
                config.images.likeIcon
            }
            /> <
            Image style = {
                [styles.icon, {
                    height: 37,
                    width: 37
                }]
            }
            source = {
                config.images.commentIcon
            }
            /> <
            Image style = {
                [styles.icon, {
                    height: 45,
                    width: 45
                }]
            }
            source = {
                config.images.shareIcon
            }
            /> <
            /View> <
            /View>
        );
    }
}

const styles = StyleSheet.create({})
export default Post;

Ответ №1:

Я думаю, что способ обновления состояния неверен. Смотрите этот код this.state.numberPressed из вашего onPress;

Вы должны заменить его на ‘this.setState`. Это должно быть так:

 onPress = {() => {
        this.setState(prevSate=> {
             const nextPressed = prevSate.numberPressed   1;
             if (nextPressed % 2 === 0) {
                  this.likeToggled()
             }
             return { numberPressed: nextPressed}
        });

    }
}

Ответ №2:

Возможно, это вам поможет. Попробуйте:

     this.state.numberPressed  ;
            if (this.state.numberPressed % 2 == 0) {
                this.likeToggled()
            }

    this.setState({numberPressed: numberPressed  })
                if (this.state.numberPressed % 2 == 0) {
                    this.likeToggled()
                }

  Text style = {
        styles.topLogo
    } > Instaounce < /Text> <
    Post / >

     Text style = {
        styles.topLogo
    } > <Instaounce/> < /Text> <
    Post / >