我正在尝试在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