使用NavigatorIOS react-native时,屏幕左侧不可触摸

时间:2016-04-27 07:25:06

标签: ios react-native

当我使用iOS(需要它)时,我的反应原生NavigatorIOS应用程序上有这个非常奇怪的错误:屏幕左侧有一个30点区域,即在touchableHighlight元素的第一次触摸(TouchableWithoutFeedbackListview上没有任何反应)中不可触摸,例如......

当我使用Navigator时,没有任何问题,它特定于NavigatorIOS(我在应用程序的这一部分需要它),也尝试没有任何风格,同样的问题。

没有看到任何有关此错误的github问题或讨论。

修改:

可运行的示例:https://rnplay.org/apps/E0R2vg

组件代码示例:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
  ListView,
  TouchableWithoutFeedback,
  Dimensions,
} = React;

var myListView = React.createClass({
  getInitialState: function() {
    return {
        ds: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            }),
        };
    },

  componentDidMount: function() {
    console.log('feed datasource');
    this.setState({
      ds: this.state.ds.cloneWithRows([{name: 'one'}, {name:'two'}, {name: 'three'}]),
    });
  },

  render: function() {
    return (
            <View style={styles.container}>
                <ListView 
                    dataSource={this.state.ds}
                    renderRow={this.renderItem}
                    style={styles.listView}
                />
        <TouchableWithoutFeedback onPress={this.nextroute}>
            <View style={[styles.pressme, {flex:1}]}>
                <Text>Next route to see the issue</Text>
                </View>
        </TouchableWithoutFeedback>
            </View>
        );
    },

  renderItem: function(item) {
    return (
            <View style={styles.row}>   
          <TouchableWithoutFeedback onPress={() => alert('pressed')}>
            <View style={styles.pressme}>
                <Text>x</Text>
                </View>
        </TouchableWithoutFeedback>
        <Text>{item.name} - Item description...</Text>
      </View>
    );
  },

  nextroute: function() {
    this.props.navigator.push({
            title: 'Try press [x] (twice)',
            component: myListView,
            onLeftButtonPress: () => this.props.navigator.pop(),
        });
  },

});

var SampleApp = React.createClass({
  render: function() {
    return (
            <NavigatorIOS
                style={styles.navcontainer}
                initialRoute={{
                    component: myListView,
                    title: 'First view is ok', 
                }}
                tintColor="#000000"
                barTintColor="#fd7672"
                translucent={false}
                ref='navios'
            />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 28,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    fontSize: 19,
    marginBottom: 5,
  },
  navcontainer: {
        flex: 1,
    },
  listView: {
    flex: 1,
    width: Dimensions.get('window').width,
  },
  row: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
  pressme: {
    margin: 10,
    borderWidth: 1,
    borderColor: 'red',
    padding: 15,
  }
});

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

0 个答案:

没有答案