在React Native中创建一个带有数据表的单选按钮节,可以按照以下步骤进行:
npm install react-native-table-component react-native-radio-buttons --save
import React, { Component } from 'react';
import { View } from 'react-native';
import { Table, Row } from 'react-native-table-component';
import RadioButtons from 'react-native-radio-buttons';
class RadioButtonTable extends Component {
constructor(props) {
super(props);
this.state = {
tableData: [
['Option 1', 'Value 1'],
['Option 2', 'Value 2'],
['Option 3', 'Value 3'],
],
selectedOption: null,
};
}
render() {
const { tableData, selectedOption } = this.state;
return (
<View>
<Table borderStyle={{ borderWidth: 1, borderColor: '#C1C0B9' }}>
<Row data={['Option', 'Value']} style={styles.head} textStyle={styles.text} />
{
tableData.map((rowData, index) => (
<Row
key={index}
data={rowData}
style={[styles.row, index%2 && { backgroundColor: '#F7F6E7' }]}
textStyle={styles.text}
/>
))
}
</Table>
<RadioButtons
options={tableData.map(rowData => rowData[0])}
onSelection={option => this.setState({ selectedOption: option })}
selectedOption={selectedOption}
/>
</View>
);
}
}
const styles = StyleSheet.create({
head: { height: 40, backgroundColor: '#808B97' },
text: { margin: 6, color: '#fff' },
row: { height: 30 },
});
render() {
return (
<View>
<RadioButtonTable />
</View>
);
}
这样,就可以在React Native中创建一个带有数据表的单选按钮节了。根据实际需求,可以修改数据表的内容和样式,以及单选按钮节的选项和样式。
领取专属 10元无门槛券
手把手带您无忧上云