React Native ListView: rendu Le texte n'est pas sélectionnable

Question

Je suis nouveau dans React Native et je suis en train de tester ListView. Je rends chaque ligne en tant que texte avec selectable = {true}, mais je ne peux pas sélectionner de texte dans une ligne.

Je ne peux pas savoir pourquoi et googling ne m'a rien donné.

Comment dois-je faire pour que je puisse sélectionner du texte dans chaque ligne de ListView?

Mon code de test:

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    ListView, 
    ScrollView, 
    TouchableHighlight, 
} from 'react-native'; 

class Item extends Component { 
    onPress =() => { 
    console.log(`Item: component pressed: ${this.props.itemObj.name} `); 
    }; 

    render() { 
    {/*<TouchableHighlight onPress={this.onPress} underlayColor='greenyellow'>*/} 
    return (
     <TouchableHighlight> 
     <Text style={styles.item} selectable={true}> 
      {this.props.itemObj.name} 
     </Text> 
     </TouchableHighlight> 
    ); 
    } 
} 

export default class ListViewTest extends Component { 
    constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2 }); 
    this.state = { 
     dataSource: ds.cloneWithRows([]), 
    }; 
    } 

    componentWillMount() { 
    console.log("componentWillMount"); 
    let items = []; 
    for (let i=0; i<30; i++) { 
     items.push({name: "item" + i}); 
    } 
    this.setState({dataSource: this.state.dataSource.cloneWithRows(items)}); 
    } 

    renderRow = (itemObj) => { 
    // console.log("renderRow(): "); 
    // console.log(row); 
    return <Item itemObj={itemObj} />; 
    {/*return <Text style={styles.item} selectable={true}>test message</Text>*/} 
    }; 

    render() { 
    console.log("render"); 
    return (
     <ScrollView> 
     <ListView 
      style={styles.list} 
      dataSource={this.state.dataSource} 
      initialListSize={1} 
      renderRow={this.renderRow} 
      enableEmptySections={true} 
     /> 
     </ScrollView> 
    ); 

    // return (
    // <ScrollView> 
    //  <Item itemObj={{name: "item1"}} /> 
    // </ScrollView> 
    //); 
    } 
} 

const styles = StyleSheet.create({ 
    list: { 
    flex: 1, 
    }, 
    item: { 
    padding: 5, 
    borderBottomColor : 'blue', 
    borderStyle: 'solid', 
    borderBottomWidth : 1, 
    }, 
}); 

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

Answer 1

Vous pouvez changer Constructor .Je pense que vous ne tableau de charge à listview .Vous devez supprimer notamment de componentWillMount .Vous pouvez pousser les articles à l'intérieur constructor.Can tableau vous essayez ce code ?

import React, { Component } from 'react'; 
     import { 
      AppRegistry, 
      StyleSheet, 
      Text, 
      View, 
      ListView, 
      ScrollView, 
      TouchableHighlight, 
     } from 'react-native'; 

     class Item extends Component { 
      onPress =() => { 
      console.log(`Item: component pressed: ${this.props.itemObj.name} `); 
      }; 

      render() { 
      return (
      <View> 
       <Text style={styles.item} selectable={true}> 
        {this.props.itemObj.name} 
       </Text> 
      </View> 
      ); 
      } 
     } 

     export default class ListViewTest extends Component { 
      constructor(props) { 
      super(props); 
      let items = []; 
      for (let i=0; i<30; i++) { 
       items.push({name: "item" + i}); 
      } 
      const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2 }); 
      this.state = { 
       dataSource: ds.cloneWithRows([items]), 
      }; 
      } 

      renderRow = (itemObj) => { 
       return <Item itemObj={itemObj} />; 
      } 
      }; 

      render() { 
      console.log("render"); 
      return (
       <ScrollView> 
       <ListView 
        style={styles.list} 
        dataSource={this.state.dataSource} 
        initialListSize={1} 
        renderRow={this.renderRow} 
        enableEmptySections={true} 
       /> 
       </ScrollView> 
      ); 

      // return (
      // <ScrollView> 
      //  <Item itemObj={{name: "item1"}} /> 
      // </ScrollView> 
      //); 
      } 
     } 

     const styles = StyleSheet.create({ 
      list: { 
      flex: 1, 
      }, 
      item: { 
      padding: 5, 
      borderBottomColor : 'blue', 
      borderStyle: 'solid', 
      borderBottomWidth : 1, 
      }, 
     }); 

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