导航回调本机反应

Question

我有两个屏幕。主页和照片详情。在主页上，我有照片列表。如果我在 PhotoDetails 屏幕上喜欢照片，我想在主屏幕上更新喜欢的内容。无需更新整个页面。我可以在屏幕之间使用回调吗？如何？我正在使用 StackNavigator。谢谢回答

 <TouchableHighlight
                                    onPress={() => navigate('PhotoDetails', {
                                        id: rowData.caption.id,
                                        tag: rowData.caption.text,
                                        url: rowData.images.standard_resolution.url,
                                        likes: this.state.likes[rowData.caption.id] || 0
                                    })}>
                                    <Image
                                        source={{uri:rowData.images.standard_resolution.url}}
                                        style={{width: 320, height: 320}}/>
                                </TouchableHighlight>

 <Like
                    onPress={()=> {onLike(this.state.id).then((newLikes)=>{
                        this.setState({
                            likes: newLikes
                        })
                    })}}
                    likes={this.state.likes + '' || '0'}
                />

Answer 1

在您的情况下，您应该将回调函数从主屏幕传递到子屏幕，这将更新值。例如：

class HomeScreen extends Component {
    state = { likes: 0 }

    callback(likes) {
        this.setState({ likes: likes })
    }

    render() {
        const navigation = this.props.navigation;
        return (
            <View>
                <Text onPress={navigation.navigate('SomeChildScreen', { callback: this.callback.bind(this), likes: this.state.likes })}>Go to Child Screen</Text>
            </View>
        )
    }
}


class SomeChildScreen extends Component {

    liked() {
        const navigation = this.props.navigation;
        let likes = navigation.getParam('likes');
        likes++;
        navigation.getParam('callback')(likes);
        navigation.navigate('HomeScreen');
    }

    render() {
        const navigation = this.props.navigation;
        return (
            <View>
                <Text onPress={this.liked}>Like</Text>
            </View>
        )
    }
}

注意我们必须如何传递回调函数：this.callback.bind(this)

导航回调本机反应

Navigate callback react native

javascript

ecmascript-5

react-native