javascript - 组件的单个实例反应原生

Question

我想制作一个呈现模态的组件。这个组件应该有states{Key(integer),ImageLink(string),Visible(bool)}. 我正在使用flatlist. 我想在 flatlist 父级但组件上呈现组件的模式。触摸平面列表子时，状态会发生变化。

例如：

模态组件，意思是单实例

import React from "react";
import {
    View,
    Modal,
    Text,
    StyleSheet,
    TouchableHighlight,
    Platform
} from "react-native";

export default class MySingleInstanceModal extend Component{
    constructor(props) {
        super(props);
        this.state = {
            Visiable: props.Visiable, \\Bool For turning Modal On or Off
            ImageLink: props.ImageLink, \\String Image Online Link
            Key: props.PostKey,\\integer Key
        };
    }

    NextImage = (Current,Link )=> {
        this.setState({ ImageLink: Link,Key:Current+1 });
    };

    ToggleMeOff = () => {
        this.setState({ TurnMeOn: false });
    };

    ToggleMeOn = (MyKey,MyLink) => {
        this.setState({ TurnMeOn: true,ImageLink: MyLink,Key:MyKey  });
    };

    PrevImage = (Current,Link )=> {
        this.setState({ ImageLink: Link,Key:Current-1 });
    };

    render() {
        return (
            <View>
                <Modal
                    animationType="slide"
                    transparent={false}
                    visible={this.state.TurnMeOn}
                >
                    <View style={{ marginTop: 22 }}>
                        <View>
                            <Text>Hello World!</Text>
                            <TouchableHighlight onPress={this.ToggleMeOff}>
                                <Text>Hide Modal</Text>
                            </TouchableHighlight>
                            <Image
                                source={{ uri: this.state.ImageLink }}
                                resizeMethod={"resize"}/>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }
}

调用 Flatlist 父级：

render() {
    return  (
      <View style={Style1.container}>
      <MySingleInstanceModal/> // Here I want to call render
      <FlatList
              data={data}
              initialNumToRender={4}
              keyExtractor={this._keyExtractor}
              renderItem={this._renderItem}
              onEndReached={this._reachedEnd}
              refreshing={isRefreshing}
              onEndReachedThreshold={0.5}
              onRefresh={this._refreshdata}
              ListFooterComponent={this.renderFooter}
            />
    </view>)
}

并且想states改变MySingleInstanceModalin flatlist items( flatlist child)

在平面列表子项的渲染中的某处

render(){
    return  (
        ...
        <TouchableHighlight onPress={() => 
            MySingleInstanceModal.ToggleMeOn(this.state.Link,this.state.Key)}>
            <Text>Open Modal For Me</Text>
        </TouchableHighlight>
        ...
    )
}

这意味着组件将在父级呈现，但其状态将由子级控制（每个平面列表项）

标签： javascriptreact-nativereact-native-flatlist