RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1017415
Accepted
jamesscreen
jamesscreen
Asked:2020-08-26 19:24:53 +0000 UTC2020-08-26 19:24:53 +0000 UTC 2020-08-26 19:24:53 +0000 UTC

如何在 ReactNative 中制作下拉块?

  • 772

有一个用户列表。当您单击联系人块时,有必要将其展开到内容的高度。到目前为止,我不知道该怎么做。

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      isSelected: false,
      users: [
        {
          "name": "Isabel Dorsey",
          "email": "isabeldorsey@eschoir.com",
          "about": "Laborum nostrud occaecat quis non id pariatur amet. Proident ad exercitation incididunt consectetur velit dolore laborum consectetur deserunt labore. Reprehenderit sit nostrud ad nostrud magna nisi et mollit. Cupidatat tempor nisi amet do ullamco qui Lorem sit enim. Ut reprehenderit occaecat id dolore sint ipsum consectetur qui commodo ut magna Lorem. Dolor laborum ex aliqua sint exercitation nulla dolor voluptate sint occaecat reprehenderit aute nostrud.\r\n"
        },
        ...
      ],
    };

    this.changeState = this.changeState.bind(this);
  }

  changeState(isSelected){
    this.setState({ isSelected: !this.state.isSelected });
  }

  render() {
    let { isSelected } = this.state
    const { users } = this.state
    return (
      <View style={styles.container} >
        <Text style={styles.h2}>Список контактов</Text>

        <FlatList
          data={users}
          renderItem={({item}) =>
            <View style={styles.flatItem}>
              <TouchableOpacity
                style = {[
                    styles.itemField,
                    isSelected ?
                      styles.resizeFieldPress :
                      styles.resizeField
                ]}
                onPress = { this.changeState }
              >
                <Text style={styles.name}>{item.name}</Text>
                <Text style={styles.email}>{item.email}</Text>
                <Text style={styles.about}>{item.about}</Text>
              </TouchableOpacity>
            </View>
          }
          keyExtractor={item => item.email}
        />
      </View>
    );
  }
}
react-native
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    Mike
    2020-08-27T20:35:36Z2020-08-27T20:35:36Z

    FlatList - 向其添加一个 extraData 属性以extraData={this.state.selected}重绘应打开的所需单元格。在 renderItem 中,对展开和折叠状态进行条件单元格渲染;)

    changeState = (index) => this.state({ selected: index });
    
    <FlatList
          data={users}
          renderItem={({ item, index }) => (
            <View style={styles.flatItem}>
              {index === this.state.selected ? (
                <TouchableOpacity
                  style={[styles.itemField, styles.resizeFieldPress]}
                  onPress={() => this.changeState(index)}
                />
              ) : (
                <TouchableOpacity
                  style={[styles.itemField, styles.resizeField]}
                  onPress={() => this.changeState(-1)}
                >
                  <Text style={styles.name}>{item.name}</Text>
                  <Text style={styles.email}>{item.email}</Text>
                  <Text style={styles.about}>{item.about}</Text>
                </TouchableOpacity>
              )}
            </View>
          )}
          keyExtractor={item => item.email}
        />
    
    
    • 0

相关问题

  • 授权后如何初始化(下载所有必要的数据)react-native应用程序?

  • 如何在 react-native expo 中显示 svg 标记?

  • 如何在 react-native+expo 中保存上传的文件?

  • 如何在 react-native+expo 中从 AsyncStorage 获取数据(令牌、密码、登录名)?

  • React-native(android)获取发布请求以获取令牌,服务器上出现400错误

  • React Native 上的应用

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    根据浏览器窗口的大小调整背景图案的大小

    • 2 个回答
  • Marko Smith

    理解for循环的执行逻辑

    • 1 个回答
  • Marko Smith

    复制动态数组时出错(C++)

    • 1 个回答
  • Marko Smith

    Or and If,elif,else 构造[重复]

    • 1 个回答
  • Marko Smith

    如何构建支持 x64 的 APK

    • 1 个回答
  • Marko Smith

    如何使按钮的输入宽度?

    • 2 个回答
  • Marko Smith

    如何显示对象变量的名称?

    • 3 个回答
  • Marko Smith

    如何循环一个函数?

    • 1 个回答
  • Marko Smith

    LOWORD 宏有什么作用?

    • 2 个回答
  • Marko Smith

    从字符串的开头删除直到并包括一个字符

    • 2 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5