React Native ListView：呈现的文本不可选择

Question

我是 React Native 的新手，正在测试 ListView。我使用 selectable={true} 将每一行呈现为文本，但我无法选择任何行中的任何文本。

我不知道为什么，谷歌搜索并没有给我任何信息。

我应该怎么做才能在 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。您可以将项目推送到构造函数中的数组。您可以试试这段代码吗？

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