React-Native onPress 在导出为组件时不起作用

Question

我将Instaounce.js类的一部分移至post.js文件中以进行可重复使用。当我尝试在Instaounce的视图组件中放置一个帖子组件，并在app.js的视图组件中进行Instaounce时，post.js（第38行）中的OnPress功能不起作用。但是，当我在app.js的视图组件中运行帖子时

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;

Answer 1

我认为您更新状态的方式不正确。从您的OnPress中查看此代码this.state.numberPressed++;

您应该用'this.setstate`代替它。应该这样：

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

Answer 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 / >