Question

有一个父类“ ParentClass.js ”，其中渲染方法具有一个名为“ CustomeRow.js ”的customRow。customRow在地图上进行迭代并具有一个按钮。我的要求是在 CustomRow.js

中的按钮的OnPress上打开模式窗口“ ModalWindow.js”

这是我的ParentClass.js

import React from "react";
import { View, StyleSheet} from "react-native";
import CustomRow from './CustomRow';
import { ScrollView } from "react-native-gesture-handler";

class ParentClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            search: '',
            data: [],
        };
    }
    componentDidMount() {
        return fetch('URL')
            .then(response => response.json())
            .then((responseJson) => {
                this.setState({
                    data: responseJson
                })
            })
            .catch(error => { alert(error) });
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView>
                    <View style={styles.rect}>
                    </View>
                    <CustomRow
                        buttonName ={this.state.data.buttonname}
                    />
                </ScrollView>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    root: {
        backgroundColor: "white",
        flex: 1,
        flexDirection: "column"
    },
    rect: {
        backgroundColor: "rgb(217, 217, 217)",
        height: 60,
        flexDirection: 'row',
        padding: 10,
        paddingLeft: 15,
    },
    text: {
        width: 150,
        fontSize: 15,
    },

});

export default ParentClass;

这是我的CustomRow.js

import React from 'react';
import { View } from 'react-native';
import { Button } from 'react-native-elements';
import ModalWindow from './ModalWindow';

launchModalWindow = () => {
    return (
        <ModalWindow />
    );
}

const CustomRow = ({ buttonName }) => (
    <View >
        <Button title={buttonName}
            onPress={this.launchModalWindow.bind(this)}
        />
    </View>
);

export default CustomRow;

ModalWindow.js如下

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';

export default class ModalWindow extends Component {
  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

我尝试了上面的代码，但单击按钮后无法启动模式，它不会引发任何错误并且没有任何动作。请帮助

谢谢。

这是上面代码的小吃。 https://snack.expo.io/@dsouzawilbur/moody-tortilla

通过“自定义行”按钮打开模式

0 个答案: