Question

我是React Native的新手。单击图像图标提示事件时出现问题。我希望仅从图像按钮发生提示事件。但是，当我点击或点击屏幕中的任何位置时，它会打开。可以做些什么来解决这个问题？在样式表中，marginBottom和marginRight也不起作用，所以我使用marginTop和marginLeft。还有什么可以解决这个问题？

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableHighlight
} from 'react-native';

import ToolbarAndroid from 'ToolbarAndroid';
import Prompt from 'react-native-prompt';

class DevForm extends Component {
  constructor(props) {
  super(props);
    this.state = {
       message: '',
       promptVisible: false
    };
}
render() {
return (
  <View style = {styles.container}>
    <ToolbarAndroid style = {styles.toolbar}>
      <Text style = {styles.titleText}> Data Collector </Text>
    </ToolbarAndroid>

    <TouchableHighlight 
      onPress={() => this.setState({ promptVisible: true })}
    >
      <Image 
        source = {require('./icon_container/ic_plus_circle_add_new_form.png')} 
        style = {styles.addButton}       
      />
    </TouchableHighlight>
     <View style = {{ flex: 1, justifyContent: 'center' }}>
        <Text style = {{ fontSize: 20 }}>
          {this.state.message}
        </Text>
      </View>
      <Prompt
        title = "Write title of form "
        placeholder = "Your title is here"
        visible = {this.state.promptVisible}
        onCancel = {() => this.setState({ promptVisible: false, message: 'You cancel it !!!'})}
        onSubmit={(value) => this.setState({ promptVisible: false, message: `You title is "${value}"` })}
      />
  </View>
  );
 }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  toolbar: {
    height: 56,
    backgroundColor: '#3F51B5'
  },
  titleText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff'
  },
  addButton: {
    marginLeft: 270,
    marginTop: 420,
    height: 50,
    width: 50
  }
});

AppRegistry.registerComponent('DevForm', () => DevForm);

Answer 1

所以我在运行代码后可以弄清楚的是，如果你没有marginLeft和marginTop那么提示对话框只出现在marginLeft和marginTop覆盖的区域而不是完整的屏幕，那么很难重现这个bug。你在本例中使用的npm库“react-native-prompt”中可能存在一个错误，除了我不确定实际出错的地方。

录制时，屏幕中的eveywhere会发生提示事件

1 个答案: