React Native ListView：レンダリングされたテキストは選択できません

Question

React Nativeを初めて使用し、ListViewをテストしています。私は各行をselectable = {true}のTextとしてレンダリングしますが、どの行のテキストも選択することはできません。

なぜ、Googleで検索しても何もわからなかったのです。

ListViewの各行でテキストを選択できるようにするにはどうすればよいですか？

私のテストコード：あなたはConstructor .Iを変更することができます

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

はあなたが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);