javascript - 为平面列表中的每个项目添加两个按钮
问题描述
实际上,我正在为一个反应原生的学校项目工作,我想知道是否可以使用 react-native 将两个按钮添加到平面列表中。
export class ItineraryScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
data:[
{key: 'PKRX'},
{key: 'UXUA'},
{key: 'PGRF'},
]
};
}
render() {
return (
<ScrollView>
<FlatList
data={this.state.data}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</ScrollView>
);
}
你能给一些建议来实现这个功能吗?
此致,
伊玛德。
解决方案
以下是 yu 如何做到这一点的示例(Repro on Snack Expo):
import * as React from 'react';
import { Text, View, StyleSheet , FlatList, Button} from 'react-native';
export default function App() {
const data = [
{key: 'PKRX'},
{key: 'UXUA'},
{key: 'PGRF'},
];
return (
<View>
<FlatList data={data} renderItem={({item}) => <Item item={item} /> } />
</View>
);
}
const Item = ({item}) => {
return (
<View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
<Text>{item.key}</Text>
<View style={{flex:1, flexDirection: 'row-reverse'}}>
<Butto title='Button 1' onPress={() => {}} />
<Button title='Button 2' onPress={() => {}} />
</View>
</View>
)
}
推荐阅读
- sql - Where 子句和 Join on 子句中的别名
- javascript - TypeError:部署在 Heroku 上的 Strapi 应用仅支持绝对 URL
- java - 使用 Quarkus 和 RestEasy 上传多个文件
- mysql - Float 的十六进制对话 - Big Endian
- r - 如何将以下代码变成for循环?
- swagger - 在大摇大摆中,我可以将整个帖子请求正文用作纯文本参数吗?
- node.js - 在 nodejs 中登录 JWT API
- angular - firestore 集合,检索要存储和使用的字段值
- javascript - Interact.js dropzone 事件不会触发
- knockout.js - 在 Knockout.js 视图中,何时将 observable 作为函数调用?