React Native ListView:呈现的文本不可选择
我是新来的本地人,正在测试ListView。我使用selectable={true}将每一行呈现为文本,但我无法选择任何行中的任何文本 我不知道为什么,谷歌没有给我任何东西 我应该如何做才能在ListView的每一行中选择文本 我的测试代码:React Native ListView:呈现的文本不可选择,listview,text,react-native,jquery-ui-selectable,Listview,Text,React Native,Jquery Ui Selectable,我是新来的本地人,正在测试ListView。我使用selectable={true}将每一行呈现为文本,但我无法选择任何行中的任何文本 我不知道为什么,谷歌没有给我任何东西 我应该如何做才能在ListView的每一行中选择文本 我的测试代码: import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, ScrollView, Touc
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);
您可以更改构造函数。我认为您不会将数组加载到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);
嗨,谢谢,但那没用。它无法被渲染。我认为这里的[items]是一个由1个元素组成的数组,也是一个数组,需要进行一些特殊处理才能呈现。。