TouchableHighlight 与 ScrollView 中的路线不起作用答案

【问题标题】：TouchableHighlight with route in ScrollView not workingTouchableHighlight 与 ScrollView 中的路线不起作用
【发布时间】：2016-11-03 06:41:48
【问题描述】：

export default class Main extends Component {    
  constructor(props) {
  super(props);    
}

  go_to_details(){
      this.props.navigator.push({
        title:'Wine Details',
        component : winedetails
      })    
  }    

  render() {

    var tmp_array = [
      {
    "product_name": "RED WINE",
    "Price": 26,
    "img": "./img/red-wine.jpg",
    "bis": "Hanau Hbf",
    "Wochentag": "Fr",
    "Zeitraum": ""
},
{
    "product_name": "GOLD WINE",
    "Price": 27,
    "img": "./img/red-wine.jpg",
    "bis": "Regensburg Hbf",
    "Wochentag": "So",
    "Zeitraum": ""
},
{
    "product_name": "ICE WINE",
    "Price": 28,
    "img": "./img/red-wine.jpg",
    "bis": "WÃ¼rzburg Hbf",
    "Wochentag": "Fr",
    "Zeitraum": ""
},
{
    "product_name": "ICE SCOT WINE",
    "Price": 35,
    "img": "./img/red-wine.jpg",
    "bis": "Puttgarden",
    "Wochentag": "tgl.",
    "Zeitraum": "25.06. - 04.09."
},
{
    "product_name": "ITALIC WIN",
    "Price": 36,
    "img": "./img/red-wine.jpg",
    "bis": "Hamburg Hbf",
    "Wochentag": "tgl.",
    "Zeitraum": "25.06. - 04.09."
}
    ];

    var list = tmp_array.map(function(news, i){
      return(
        <View key={i}>
          <Text>{news.product_name}</Text>
          <View>
            <Text>{news.Price}</Text>
          </View>
          <TouchableHighlight style={globle.buy_it}
            onPress={() => this.go_to_details.bind(this) }>
            <Text style={globle.buy_it_text}>BUY THIS</Text>
          </TouchableHighlight>
        </View>
      );
    });

    return (
      <View>
        <ScrollView>
     {list}
        </ScrollView>
      </View>
    );
  }
}

这是错误

【问题讨论】：

欢迎来到 Stack Overflow。请使用tour 并阅读How to Ask 一个好问题。
你还需要绑定一个函数，传递给.map或者使用箭头函数代替。

标签： react-native react-native-listview react-native-router-flux react-native-scrollview

【解决方案1】：

试试下面的代码

    getRow(news, i) {
       return (
            <View key={i}>
                <Text>{news.product_name}</Text>
                <View>
                    <Text>{news.Price}</Text>
                </View>
                <TouchableHighlight
                    style={globle.buy_it}
                    onPress={this.go_to_details.bind(this)}>
                    <Text style={globle.buy_it_text}>BUY THIS</Text>
                </TouchableHighlight>
            </View>
        );
    }

   render() {

        //var tmp_array =.... //intialise array

        var list = tmp_array.map(this.getRow.bind(this));

        return (
            <View>
                <ScrollView>
                    {list}
                </ScrollView>
            </View>
        );
    }

我所做的更改是

添加绑定到地图函数调用
修改了 TouchableHighlight 中的 onPress 绑定语句

【讨论】：