无法使整个TouchableWithFeedback组件可单击React Native

时间:2016-08-30 09:19:48

标签: android react-native

我正在尝试在Android中创建滑块菜单。因此,我使用View父级和包含的图标和文本子项<!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="AccordionDemoCtrl" class="container"> <br> <br> <br> <div class="row"> <div class="col-md-10"> <form role="form" id="$index" class="base-form" ng-repeat="form in transforms track by $index"> <input type="checkbox" ng-model="oneAtATime" style="display:none"> <uib-accordion close-others="oneAtATime"> <div uib-accordion-group class="panel-default" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled" ng-repeat="itemfield in form.wpformfields track by $index"> <uib-accordion-heading> Transaction <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isFirstOpen, 'glyphicon-chevron-right': !status.isFirstOpen}"></i> </uib-accordion-heading> <div class="md-col-10 main-container"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label>Employee name </label> <input type="text" class="form-control" name="employee" id="employee" ng-model="itemfield.employee"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label>Amount </label> <input type="text" class="form-control" name="amount" id="amount" ng-model="itemfield.amount"> </div> </div> </div> <div class="row"> <div class="col-md-12"> <button type="submit" class="btn btn-default pull-right" ng-click="addTransaction(form, $index)"><i class="fa fa-floppy-o"></i> Save record</button> </div> </div> </div> </div> </uib-accordion> <div class="row"> <div class="col-md-12 col-md-offset-5"> <a class="btn btn-danger" ng-click="addtransactionForm(form)"><i class="fa fa-user-plus fa-lgt" ></i> Add new transaction record</a> </div> </div> </form> </div> </div> </div> </body> </html> 。问题是整个组件不可点击。只有左侧第一个 10%可点击。

我尝试删除所有样式并切换到TouchableNativeFeedback TouchableWithoutFeedback TouchableOpacity,但问题仍然存在。

TouchableHighlight

在DrawerContent.js中:

import React from 'react'

import {View,
Text,
StyleSheet,
TouchableOpacity,
Platform
} from "react-native";

var DrawerMenuItem = React.createClass({

propTypes: {
 onClick: React.PropTypes.func,
 text: React.PropTypes.string.isRequired,
 iconName: React.PropTypes.string.isRequired
},

 render: function() {
 return(


   name={this.props.iconName}
   size={24}
   color={colors.lightBlack}
    />
   {this.props.text}


 )
 }

 });

 module.exports = DrawerMenuItem;`

import React from 'react' import DrawerMenuItem from './DrawerMenuItem' import {View, Text, StyleSheet, TouchableOpacity, TouchableNativeFeedback, BackAndroid, ScrollView, Image, Platform } from "react-native"; var DrawerContent = React.createClass({ propTypes: { onClick: React.PropTypes.func, resetStack: React.PropTypes.func, closeDrawer: React.PropTypes.func, }, _onPress: function(viewToShow){ this.props.onClick(viewToShow); this.props.closeDrawer(); }, render: function() { return ( <View> <View> <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end'}}> <Text>{reduxStore.getState().user.name}</Text> </View> <Image resizeMode='cover' source={require('../../resources/images/rf_logo_vit.png')}></Image> </View> <ScrollView showsVerticalScrollIndicator={false} style={styles.menu}> <View> <DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='line-chart' text={'###'}/> <DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='bar-chart' text={'###'}/> <DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='bullseye' text={Localize('###')}/> <DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='phone' text={Localize('###')}/> <DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='file-text' text={Localize('###')}/> </View> </ScrollView> </View> ); } }); 是滑块菜单及其工作原理。但只有组件的第一个 10%是可点击的。我希望整个组件可以点击。我的意思是 TouchableNativeFeedback 里面的所有内容。现在它只是Icon的一半。

  

React Native版本:0.31.0平台Android(也是同样的问题)   IOS)操作系统:macOS

0 个答案:

没有答案