React 네이티브 ListView : 렌더링 된 텍스트를 선택할 수 없습니다.

Question

React Native를 처음 사용하고 ListView를 테스트하고 있습니다. selectable = {true}로 각 행을 Text로 렌더링하지만 임의 행의 텍스트를 선택할 수는 없습니다.

나는 이유를 알아낼 수 없으며 인터넷 검색에서 아무 것도주지 못했습니다.

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.Can 내부 배열에 항목을 밀어 수 componentWillMount의를 포함하여 제거해야합니다 listview에 부하 배열을 해달라고 생각 .I Constructor을 변경할 수 있습니다 ?

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