文章/答案/技术大牛

发布

社区首页 >问答首页 >在Flatlist本身之外响应本机调用的Flatlist项

问在Flatlist本身之外响应本机调用的Flatlist项
EN

Stack Overflow用户

提问于 2018-11-07 13:01:13

回答 1查看 1.3K关注 0票数 0

我正在尝试在我的Flatlist下面设置一个发送订单按钮按钮，其中发送订单按钮将把状态与我的Flatlist中的item一起发送到另一个屏幕/视图。

“但问题是，我不知道如何在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>
        )
    }
}

android

reactjs

react-native

ecmascript-6

javascript

回答 1

Stack Overflow用户

发布于 2018-11-07 13:43:04

请查看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}
      />
    );
  }

而不是在导航函数中传递大量参数，您可以使用全局语句，例如剩馀。

在您的情况下，您可以通过getParam函数从ReactNavigation获得屏幕‘ReactNavigation’中的参数

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53189979

复制

相似问题

问在Flatlist本身之外响应本机调用的Flatlist项
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Flatlist本身之外响应本机调用的Flatlist项EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Flatlist本身之外响应本机调用的Flatlist项
EN