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

Fra*_*ois 5 ios react-native

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

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

没有看到任何关于这个bug的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);
Run Code Online (Sandbox Code Playgroud)