Question

我想在组件中渲染模态。该组件应具有states{Key(integer),ImageLink(string),Visible(bool)}。我正在使用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>
        );
    }
}

致电单位列表父级：

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（MySingleInstanceModal）中flatlist items的{{1}}

呈现平面列表子项的某处

flatlist child

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

组件的单个实例响应本机

0 个答案: