React Native ListView: визуализированный Текст не выбирается

Question

Я новичок в React Native и тестирую ListView. Я рисую каждую строку как текст с помощью selectable = {true}, но я не могу выбрать какой-либо текст в любой строке.

Я не могу понять, почему и googling ничего мне не дал.

Как это сделать, чтобы я мог выбирать текст в каждой строке ListView?

Мой код теста:

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

Вы можете изменить Constructor .Я думаю, что вы не массив нагрузки на listview .Вы должны удалить в том числе componentWillMount .Вы может толкнуть элементов в массиве внутри constructor.Can вы попробуйте этот код ?

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);