Question

App运行正常，但是当我点击项目时，Modal组件未呈现。不知道为什么。有人可以帮我吗。

此处填写完整的源代码： - https://www.webpackbin.com/bins/-KpOwCBrjy_PlP5t6-IH。您可以在线修改源并使用它。=。

app.js

import React, { Component } from 'react'
import {   // apis
  Animated,
  AppState,
  AsyncStorage,
  Clipboard,
  Dimensions,
  I18nManager,
  NetInfo,
  PanResponder,
  PixelRatio,
  StyleSheet,
  // components
  ActivityIndicator,
  Button,
  Image,
  ProgressBar,
  ScrollView,
  Switch,
  Text,
  TextInput,
  TouchableOpacity,
  TouchableHighlight,
  TouchableWithoutFeedback,
  View,
Modal } from 'react-native-web'
import ReactDOM from 'react-dom';

export default class App extends Component {
   state = {
      orders: [
         {
            id: '0',
            name: '#0',
            description: 'need pacemakers',
            created_time: '7/1/2017 09:00',
            created_by: 'Dr. John Chambers, M.S.',
            approval_status: 'Pending',
            requesting_dept: 'Cardiology',
            items:
            [
              {
                id: '0',
                name: 'single chamber pacemaker',
                quantity: 10,
                price: 50,
                totalCost: 500
              },
              {
                id: '1',
                name: 'dual chamber pacemaker',
                quantity: 10,
                price: 100,
                totalCost: 1000
              }
            ]
         },
         {
           id: '1',
           name: '#1',
           description: 'ordering a camera',
           created_time: '7/3/2017 09:00',
           created_by: 'Dr. Susan Murray, M.S.',
           approval_status: 'Approved',
           requesting_dept: 'Gastroenterology'
         },
         {
           id: '2',
           name: '#2',
           description: 'thyroid surgery instruments',
           created_time: '7/3/2017 13:00',
           created_by: 'Dr. Robert Dsouza, M.S.',
           approval_status: 'Approved',
           requesting_dept: 'General surgery'
         },
         {
           id: '3',
           name: '#3',
           description: 'anaesthetic for Caesarean sections',
           created_time: '7/3/2017 13:00',
           created_by: 'Dr. Gregory House, M.D.',
           approval_status: 'Approved',
           requesting_dept: 'Anaesthetics'
         }
      ]
   }

   alertItemName = (item) => {
     return (
       <Modal
        animationType={'slide'}
        transparent={false}
        visible={true}
        >
        <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
        <View>
        <Text>Modal!</Text>
        </View>
        </View>
      </Modal>
     );
   }

   render() {
      return (
         <View>
            {
               this.state.orders.map((item, index) => (
                  <TouchableOpacity
                     key = {item.id}
                     style = {styles.container}
                     onPress = {() => this.alertItemName(item)}
                  >
                     <Text style={styles.textBold}>
                        {item.name}
                     </Text>
                     <Text style={styles.textBold}>
                        {item.description}
                     </Text>
                     <Text style={styles.text}>
                        {item.created_by}
                     </Text>
                     <Text style={styles.text}>
                        {item.created_time}
                     </Text>
                     <Text style={styles.text}>
                        {item.requesting_dept}
                     </Text>
                     <Text style={styles.text}>
                        {item.approval_status}
                     </Text>
                  </TouchableOpacity>
               ))
            }
         </View>
      )
   }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
});

的package.json

{
  "name": "webpackbin-project",
  "version": "1.0.0",
  "description": "Project boilerplate",
  "scripts": {
    "start": "webpack-dev-server --content-base build/ --port 3000"
  },
  "dependencies": {
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-native-web": "0.0.113"
  },
  "devDependencies": {
    "html-webpack-plugin": "2.22.0",
    "webpack-dev-server": "2.3.0",
    "webpack": "^2.2.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-plugin-transform-class-properties": "^6.23.0"
  },
  "author": "WebpackBin",
  "license": "ISC"
}

Answer 1

好的，我用快速而肮脏的方式更新了你的小提琴＆＃34;。基本上，我所做的只是在你的州设置一个showModal bool。单击组件时，会将showModal设置为true。当状态改变时，调用render。渲染检查showModal bool，如果是真的，则渲染它。

你可以在你的状态中添加一个modalMessage，添加一个隐藏你的模型的函数（只需用showModal：false设置setState），你就好了！

alertItemName = (item) => {
 this.setState({...this.state, showModal:true}); //setState re-renders
}

render() {
if (this.state.showModal) { // State condition
   modal = 
   (<Modal
    animationType={'slide'}
    transparent={false}
    visible={true}
    >
    <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <View>
    <Text>Modal!</Text>
    </View>
    </View>
  </Modal>);
 }

  return (
    <div>
    {modal} //showing modal, if null, shows nothing
     <View>
        {
           this.state.orders.map((item, index) => (
              <TouchableOpacity
                 key = {item.id}
                 style = {styles.container}
                 onPress = {() => this.alertItemName(item)}
              >
                 <Text style={styles.textBold}>
                    {item.name}
                 </Text>

              </TouchableOpacity>
           ))
        }
     </View>
    </div>

React JS：Modal组件无法呈现

1 个答案: