React Native - вызов элемента Flatlist вне самого Flatlist

Я пытаюсь установить Кнопка отправки заказа ниже моего ФЛАТЛИСТ, где этот Кнопка отправки заказа будет отправлять состояния на другой экран / представление вместе с элемент в моем 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>
        )
    }
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 032
1

Ответы 1

Пожалуйста, посмотрите 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

Другие вопросы по теме