Question

我将Instaounce.js类的一部分移至Post.js文件中以实现可重用性。当我尝试将Instaounce的View组件内包含Post组件，并将App.js的View组件内包含Instaounce时，Post.js（第38行）中的onPress功能不起作用。但是，当我在App.js的视图组件中运行Post.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;

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

也许这会对您有所帮助。试试：

List<String> result = dest
        .stream()
        .filter(x -> x.startsWith("WAW"))
        .map(x -> {
            String[] row = x.split(" ");

            return String.format("to %s - price in EUR:    %s",
                    row[1],
                    Integer.parseInt(row[2]) * ratePLNvsEUR);
        })
        .collect(Collectors.toList());

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

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

2 个答案: