Я пытаюсь установить Кнопка отправки заказа ниже моего ФЛАТЛИСТ, где этот Кнопка отправки заказа будет отправлять состояния на другой экран / представление вместе с элемент в моем Flatlist.
«Но проблема в том, что я не знаю, как вызвать элемент Flatlist вне самого Flatlist».
Вот мой код
export default class Settlement extends Component {
constructor(props){
super(props)
this.state = {
......
}
fetchData = async () => {
....
this.setState({ data: json })
}
render() {
return (
<View>
<Text>Table No: { this.state.tbl }</Text>
<Text>{ this.state.DineIn }{ this.state.TakeOut }</Text>
<FlatList
data = {this.state.data}
renderItem = {({ item }) =>
<View>
<View>
<Text>{ item.item.order_id }</Text>
<Text>Name: { item.menu_name }</Text> //Flatlist_Items
<Text>Price: ₱{ item.menu_price }</Text>
<Text>Discount: { item.order_discount }</Text>
<Text>Amount: ₱{ item.order_amount }</Text>
.....
<Text>{ item.spcl_req }</Text>
<Text>{ item.order_quantity }</Text>
.....
</View>
</View>
}/>
</View>
<Text>Number of Orders: { this.state.numOrder }</Text>
<Text>Total Amount: ₱{ this.state.TotalSum }</Text>
<TouchableOpacity
onPress = { () => this.props.navigation.navigate('FinalSettlement', {
orderID : item.order_id,
Name : item.menu_name,
Price : item.menu_price, //Trying to pass
Ord_QTY : item.order_quantity, // the items to other view
spcl_req : item.spcl_req,
Discount : item.order_discount,
Amount : item.order_amount,
tbl : this.state.tbl,
pax : this.state.pax,
DineIn : this.state.DineIn,
TakeOut : this.state.TakeOut,
numOrder : this.state.numOrder,
TotalSum : this.state.TotalSum,
userName : this.state.userName
})}>
<Text>SEND ORDER</Text>
</TouchableOpacity>
</View>
</View>
)
}
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Пожалуйста, посмотрите RN doc, элемент списка должен быть отдельным компонентом, как указано в документе
_renderItem = ({item}) => (
<MyListItem
id = {item.id}
onPressItem = {this._onPressItem}
selected = {!!this.state.selected.get(item.id)}
title = {item.title}
/>
);
render() {
return (
<FlatList
data = {this.props.data}
extraData = {this.state}
keyExtractor = {this._keyExtractor}
renderItem = {this._renderItem}
/>
);
}И вместо того, чтобы передавать много параметров в функции навигации, вы можете использовать глобальный оператор, например Redux.
В вашем случае вы можете получить параметры на своем экране FinalSettlement с помощью функции getParam из ReactNavigation