0

このトーシャルに続いて、タッチ可能なアイテムをラップしようとしています

そして、私が見つけた問題は、アプリの起動によってナビゲーションが自動トリガーされ、クリックせずに詳細ページに移動することです。また、戻ると、タッチ可能なアイテムを押すことができなくなります。押すと、エラーがスローされます。

それを告発するための最小限のアプリを作成しました：

import React , { Component } from 'react';
import { StyleSheet,FlatList, Text, View,TouchableOpacity } from 'react-native';
import {
  StackNavigator,
} from 'react-navigation';


class Detail extends Component {
  static navigationOptions = {
    title: "Detail",
  };

  render(){
    return(
      <View>
          <Text>{this.props.value}</Text>
      </View>
    );
  }
}

class MyItem extends Component{
  render(){
    return(
      <View>
        <TouchableOpacity onPress={this.props.nav("Detail", {value: this.props.value})}>
        <Text> {this.props.value}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

class Home extends React.Component {
  static navigationOptions = {
    title: "Home",
  };
  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>
        <FlatList
          data = {[
            {key: "1"},
            {key: "2"},
            {key: "3"}
          ]
          }
          renderItem = {({item}) => <MyItem nav={navigate} value={item.key} />}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const App = StackNavigator({
  Home: { screen: Home },
  Detail: { screen: Detail },
})

export default App

私の下手な英語でこの問題を説明するのは非常に難しいので、この問題を告発するためのYouTube ビデオ (約 20M)も作成しました。

4

1 に答える 1

4 
class MyItem extends Component{
  render(){
    return(
      <View>
        <TouchableOpacity onPress={() => { this.props.nav("Detail", {value: this.props.value})} }>
        <Text> {this.props.value}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

リクエストに応じて

class MyItem extends Component{
  handleClick = () => {
    const { nav, value } = this.props;
    nav("Detail", {value});
  }
  render(){
    return(
      <View>
        <TouchableOpacity onPress={this.handleClick}>
        <Text> {this.props.value}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
于 2017-08-23T09:31:42.973 に答える