react-native定位问题

最新推荐文章于 2024-08-28 07:38:58 发布

眼睛微微笑

最新推荐文章于 2024-08-28 07:38:58 发布

阅读量544

点赞数

分类专栏： react-native

本文链接：https://blog.csdn.net/Angely_cc/article/details/105287302

版权

react-native 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

// 如果页面存在flatList,定位元素要位于他的下方
// 如果页面存在ScroolView,定位元素要位于他的外面

在这里插入图片描述
// 那几个状态是一个组件。已支付和已取消是采用定位放到那里的。一开始直接写，

// 子组件 就是那两个状态  {children}主要是用来给父组件的flatLisst留位置
const Status = ({
  activeIndex,// 选中的索引
  activeClick, // 选中要做的事
  allClick, // 点击加号的事件
  isShow, // 控制剩余的显示隐藏
  statusArray, // 状态数组
  argumentsArr, // 点击加号显示的剩余状态
  children
}) =>
//  flex:1					!!! 
  (<View style={[cS.f_1]}>
    <View style={[cS.p_r, cS.z_300, cS.f_r_b_c, cS.p_h_15, cS.b_white, cS.p_b_16,]}>
      {statusArray.map((item) => (
        <Touchable
          key={item.status}
          style={[cS.p_h_12, cS.h_26, cS.b_r_13, cS.b_all_75A8FF, cS.f_r_c, item.status === activeIndex ? cS.b_75A8FF : '']}
          onPress={() => { activeClick(item.status) }}
        >
          <Text style={[cS.f_14, cS.c_75A8FF, item.status === activeIndex ? cS.c_white : '']}>{item.text}</Text>
        </Touchable>
      ))}
      <Touchable
        onPress={allClick}
      >
        <Image
          resizeMode="stretch"
          source={add}
          style={[cS.w_17_5, cS.h_17_5]}
        />
      </Touchable>
    </View>
    {children}   
    {
      isShow ? (<View style={[cS.o_h, cS.p_a, cS.t_40, cS.r_12, cS.z_1200, cS.w_124, cS.b_white, cS.b_r_5, cS.b_all_E5E5E5]}>
        {
          argumentsArr.map((item, index) => (
            <Touchable
              key={item.status}
              style={[cS.w_100p, cS.p_h_8, cS.h_35, cS.f_c_s, item.status === activeIndex ? cS.b_75A8FF : '']}
              onPress={() => { activeClick(item.status) }}
            >
              <Text style={[cS.w_100p, cS.p_l_6, index === argumentsArr.length - 1 ? '' : cS.b_b_E5E5E5, cS.h_35, cS.l_h_35, item.status === activeIndex ? cS.c_white : '']}>
                {item.text}
              </Text>
            </Touchable>
          ))
        }

      </View>) : null
    }

  </View>)
export default Status

// 父组件使用
  <Status
          activeIndex={customerOrder.activeIndex}
          activeClick={this.activeClick}
          allClick={this.allClick}
          statusArray={statusArray}
          argumentsArr={argumentsArr}
          isShow={customerOrder.isShow}

        >
          {
            noneHouseType ?
              (<View style={[cS.f_1, cS.f_c]}>
                <Image
                  resizeMode="stretch"
                  source={nonePrize}
                  style={[cS.w_60, cS.h_60, cS.m_b_32]}
                />
                <Text style={[cS.c_BFC0CC, cS.f_16]}>暂无订单～</Text>
              </View>) :
              (
                < FlatList
                  ref={(flatList) => { flat = flatList }}
                  data={this.props.lockRoom.prizeList}
                  style={[cS.z_300]}
                  renderItem={({ item }) => this.renderItem(item)}
                  keyExtractor={(item) => item.orderId}
                  ListFooterComponent={this.renderFooter}
                  refreshing={this.state.refreshing}
                  onRefresh={this.onRefresh}
                  onEndReached={this.onEndReached}
                />
              )
          }
        </Status>