2

我是 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);
4

1 回答 1

0

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

于 2016-08-10T18:29:49.190 回答