Javascript 为flatlist中的每个项目添加两个按钮

实际上，我在react native中为一个学校项目工作，我想知道是否可以使用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>
        );


}

导出类行程屏幕扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{key:'PKRX'}，
{键：'UXUA'}，
{键：'PGRF'}，
]
};
}
render（）{
返回(
{item.key}
/>
);
}

你能为实现这一功能提供一些建议吗

致以最良好的祝愿

---

Imad.

以下是一个例子，说明了yu如何做到这一点（）：

import*as React from'React'；
从“react native”导入{文本、视图、样式表、平面列表、按钮}；
导出默认函数App（）{
常数数据=[
{key:'PKRX'}，
{键：'UXUA'}，
{键：'PGRF'}，
];
返回(
} />
);
}
常量项=（{Item}）=>{
返回(
{item.key}
{}} />
{}} />
)
}

使用文本和按钮创建一个组件，并将其放入

渲染项中

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