使用本机反应创建可扩展列表[关闭]答案

【问题标题】：Create an expandable list with react native [closed]使用本机反应创建可扩展列表[关闭]
【发布时间】：2018-04-01 08:54:53
【问题描述】：

我正在展示带有此代码的项目列表

      <View>
        <Text style={styles.sectionHeadingStyle}>
          Categories
        </Text>
        <View style={styles.navSubSectionStyle}>

        {data.categories.map(category =>
          <Text key={category.id} >
            { (JSON.parse(category.name)) }
          </Text>
          )}
        </View>

当我单击“类别”文本时，我希望能够通过动画展开/折叠列表。是否有任何反应原生元素？

【问题讨论】：

标签： javascript list reactjs react-native expandable

【解决方案1】：

将折叠的初始状态设置为 false。

handleClick = () => {
    this.setState({
        collapse: !this.state.collapse
    })
}
<View>
    <TouchableHighlight onClick={this.handleClick}>
        <Text style={styles.sectionHeadingStyle}>
           Categories
        </Text>
    </TouchableHighlight>
    </View>
    {
        this.state.collapse ? 
        <View style={styles.navSubSectionStyle}>

            {data.categories.map(category =>
            <Text key={category.id} >
                { (JSON.parse(category.name)) }
            </Text>
            )}
        </View>
        : null

    }
</View>

【讨论】：

这里的</View>s 有点混乱。

【解决方案2】：

你可以使用像 react-native-collapsible 这样的 npm 包

【讨论】：