H5 平台几种方案

1. 使用百度H5

买一台主机配置一下，使用起来比较方便

2. 鲁班H5平台

有源码，但不适用于商用

3. swiper

https://3.swiper.com.cn/

swiper是一个基础框架库，可以用这个来自己手写

4. taro

https://taro.aotu.io/
框架是京东下面的一个很有意思的框架，可以同时做app、小程序、H5多端，同时提供了比较好的案例可以直接下载使用
使用react+redux实现，比较有意思，可以研究一下。

5. wechat-h5-boilerplate

https://github.com/panteng/wechat-h5-boilerplate

可以用这个手写，体验效果还是比较好的
可以考虑使用

6. iSlider

也是一个可以自己实现的插件工具

一篇博客介绍相关H5运营内容

http://www.ptbird.cn/h5-tool.html

多端开发框架汇总

https://blog.fundebug.com/2019/03/28/compare-wechat-app-frameworks/

腾讯开源

https://opensource.tencent.com/

2020/4/3 posted in web

图片颜色画板抓取

color-thief-py
分装的很好，可以直接安装使用，提供api非常方便

colorfic
这个也不错啊

Text2Colors
这个非常有意思，一定要研究一下
后面可以多研究一点这种类型的应用。集成到平台中去

gucci

PyColorPalette

rayleigh
使用颜色搜图

colorgram.py
可以取色

paintingReorganize
Use PCA analysis to reorganize the pixels of a painting into a smooth color palette.
颜色的分析

https://github.com/athoune/Palette

https://github.com/fundevogel/we-love-colors

https://github.com/tody411/PaletteSelection

https://github.com/Zsailer/yerkes

https://github.com/PJijin/Cover-Image-Generator

2019/8/29 posted in web

瀑布流

Waterfall

宽度自适应瀑布流
https://myst729.github.io/Waterfall/
还可以，做成了异步加载

一种比较神奇的排序算法

可以研究研究的神奇的排序算法

http://suprb.com/apps/nested/

这个一定要研究一下

图片Editor分析 fabircjs 扩展包

multi-draw

☁️ 基于Fabric.js+Socket.io的多人在线实时同步画板

demo挂了，看不到，可以跑起来看看

floido-designer

这个感觉非常靠谱。

还是用了electron，这样的好处是可以做成客户端了。体验会更好

geckos

An online Card Editor with Templates http://gulix.github.io/geckos/

没运行起来，后面可以试试

基于canvas的高级画板程序.

全局绘制颜色选择
护眼模式、网格模式切换
自由绘制
画箭头
画直线
画虚线
画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形
文字输入
图片展示及相关移动、缩放等操作
删除功能
支持画板同比缩放
支持图形即时显示

photo-chrome

A state of the art web based photo editor module made using angular v4

值得好好研究研究的项目

[fabricjs-pathfinding](https://github.com/kevoj/fabricjs-pathfinding）

可视化的走迷宫，非常好的demo例子

AngularJS & FabricJS - 2D - Diagram

A browser-based 2D diagram editor, built using AngularJS, AngularUI and Fabric.js. This project is built by [Big-Silver].

react-redux-fabricjs

Fabric.js with React/Redux

2019/8/27 posted in web

图片Editor 分析

tui.image-editor

Full-featured photo image editor using canvas

Fabric.js

在这个网站上有很多针对网站的实现的内容，研究清楚这个可以直接进行编辑。

https://github.com/aurbano/nuophoto

这个实现的一般般

PlantUML Editor

https://github.com/kkeisuke/plantuml-editor

基于vue的 online UML编辑器

文档editor

https://github.com/Z-Editor/Z-Editor
https://z-editor.github.io/
A tool to create, edit and print formal Z-notation documents.

Method-Draw

非常非常好的图片Editor

yanshuo.io

用CKeditor来做的？？

2019/8/26 posted in web

Markdown PPT 工具分析

平时的文档基本上都以markdown形式进行输出，markdown可以导出到blog, gitbook, jekyll等等模型中。那么同时markdown也可以直接生成为对应的PPT，在平时讲解的时候方便直接进行投屏讲解。减少很多的制作PPT需要花费的时间。这里主要整理当下比较流行的markdown模式的ppt工具

nodeppt

nodeppt github地址

nodeppt 2.0 基于webslides、webpack、markdown-it、posthtml 重构，新效果。
其中webslides使用标签的方式进行分页分割。所以对markdown会有一定程度的侵入。

使用npm进行部署，所以安装和使用非常简单，只有2条命令就可以发布markdown到PPT模式。

支持的翻页效果较多，行列式也较多，整体的PPT样式看上去是很不错的。

同时支持echarts、流程图 mermaid，数学符号 KaTeX 三个插件

webslider

webslider
是刚才nodeppt的基础包。这个做出来的东西设计感很强，可以点击这里看一下他的demo
但是使用起来是使用XML的模式进行写作，从markdown调整过来会比较复杂。

Marp

marp
是一个基于electron框架开发的PPT工具，所以支持多个端。最终还是到网页上进行显示
他是直接使用markdown在marp工具上进行写作。
marp当前是第二个版本，版本还在开发中，还不是很成熟。

R markdown

一款基于R语言下的markdown幻灯片应用

文档比较详实，

slides

这个是做的比较好的基于reveal.js的在线幻灯片制作工具。非开源的

https://github.com/briancavalier/slides
https://slides.com

reveal.js

strut2

https://github.com/tantaman/Strut

非常好的基于3D的带编辑器的幻灯片制作工具

wtf-slides

感觉一般般，但是可以学习一下代码

matrix

matrix
有时间可以研究一下这个，用的几个包还是很不错的

md2googleslides

最后生成google slides

2019/8/25 posted in web

颜色分析功能

https://www.canva.com/colors/color-meanings/
一共有121个带有情感的颜色分析，算是比较全的颜色分析网站了，可以

https://visual.ly/community/infographic/other/what-colors-mean-different-cultures
各个国家的颜色情感图，感觉很多，但是实际上颜色比较少

https://graf1x.com/color-psychology-emotion-meaning-poster/
只有核心颜色图

https://lifehacker.com/pick-the-right-color-for-design-or-decorating-with-this-5991303

https://www.pinterest.com/pin/29203097556548552/

https://www.dailyinfographic.com/what-colors-mean-in-different-cultures-infographic

http://www.arttherapyblog.com/online/color-meanings-symbolism/#.XVmF6WT7RXg
只讲了核心颜色

https://www.pinterest.com/pin/219902394291365592/

http://www.positivehealth.com/article/mind-matters/the-logic-of-emotion![](media/15661454029978/15661486510896.jpg)

所有颜色统计

HTML颜色统计

以wiki的模式让大家为颜色命名

最详细的color name网页
对颜色

sip软件的颜色来自named that color

google的色板

一个很好的颜色选择版本

2019/8/19 posted in web

文档工具制作

https://github.com/phodal/2md
html转化为markdown

https://github.com/domchristie/turndown
这个是原始的网站工具

http://url2io.applinzi.com/docs
提取正文的网页服务

https://www.cnblogs.com/yetuweiba/p/4149683.html
提取网页正文的开源库的比较

https://www.cnblogs.com/jasondan/p/3497757.html
我为开源做贡献，网页正文提取——Html2Article

https://yq.aliyun.com/articles/622451
网页正文提取方法一二

https://www.yuanrenxue.com/crawler/news-crawler-content-extract.html
大规模异步新闻爬虫：网页正文的提取

https://dfkan.com/2333.html
使用API智能提取网页上的文章正文：url2io

https://www.jianshu.com/p/af5c5ef4f2f5
使用Python进行网页正文提取

http://www.elias.cn/MyProject/ExtMainText
ExtMainText —— 提取html文档正文

https://github.com/goose3/goose3
✨Python下非常好用的提取库

2019/8/8 posted in web

HTML cheatsheet

2019/4/17 posted in web

重要解决方案

Clean (cmd+shift+K)
Build core React - select React as the scheme in Xcode and build it (cmd+B)
Build the library that is failing (e.g. RCTText).
Build your app.

异常：React/RCTBridgeModule.h' file not found

首先要先把React Build一遍
 https://facebook.github.io/react-native/docs/linking-libraries-ios.html

在把这里添加上react的依赖

异常 Undefined symbols for architecture x86_64: "_JSClassCreate"

https://github.com/f111fei/react-native-unity-view/issues/89

这里需要添加javascript的依赖

异常 ../node_modules/react-native/packager/react-native-xcode.sh: No such file or directory

https://github.com/facebook/react-native/issues/14935

最后还是修改成scripts

最后还是用scripts完成的。

问题：

react-native cannot read property 'bindings' of null

解决方案

https://stackoverflow.com/questions/51220030/react-native-cannot-read-property-bindings-of-null

最后是换了相关的babel包。

修改 babel

babel.rc

{
    "presets": ["module:metro-react-native-babel-preset"],
    "env": {
        "development": {
          "plugins": ["@babel/transform-react-jsx-source"]
        }
      },
      "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

需要更新依赖：

package.json文件如下

{
  "name": "GankIO",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "react": "^16.8.3",
    "react-native": "^0.59.4",
    "react-native-deprecated-custom-components": "^0.1.2",
    "react-native-root-toast": "^2.1.0",
    "react-native-scrollable-tab-view": "^0.6.0",
    "react-native-swipe-list-view": "^1.4.1",
    "react-native-tab-navigator": "^0.3.3",
    "react-native-vector-icons": "^4.6.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "whatwg-fetch": "^2.0.1"
  },
  "jest": {
    "preset": "react-native"
  },
  "devDependencies": {
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.3",
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "5.0.1",
    "jest": "23.5.0",
    "react-test-renderer": "16.3.1"
  }
}

使用xcode进行编译

mac上可以将xcodeproj 的文件打开，然后再来进行编译，需要先编译React然后再编译Gank的话就可以成功

总结

所以可以看出来android和IOS的加载部分包还是有区别的。

要研究一下使用xcode来编译之后，那么如何debug呢

2019/4/8 posted in web

React Native国内镜像

一、使用淘宝镜像
1.临时使用
npm --registry https://registry.npm.taobao.org install express
2.持久使用
npm config set registry https://registry.npm.taobao.org
3.通过cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
二、使用官方镜像
npm config set registry https://registry.npmjs.org/
三、查看npm源地址
npm config get registry

2019/2/8 posted in web

React Native icon的使用

项目已经集成react-native-vector-icons ，这里将不在这里整理怎么在本地安装了。

具体使用方式

具体的icon图标样式可以在这里找

代码如下：

//直接在页面显示图标
//注意这里要引入ICON，同时还要是可以支持的icon

import Icon from 'react-native-vector-icons/Ionicons';

<Icon name="md-aperture" color={subTitleColor} size={px2dp(16)}/>

// 这个是写首页的icon button样式
render(){
        return(
            <TabNavigator
                hidesTabTouch={true}
                tabBarStyle={[styles.tabBarStyle, {backgroundColor: this.props.rowItemBackgroundColor}]}
                sceneStyle={{
                    paddingTop: theme.toolbar.paddingTop, //immersive experience
                    paddingBottom: styles.tabBarStyle.height}}>
                {this._renderItem(RegisterFragment, 'register', '注册', this.state.registerNormal, this.state.registerSelected)}
            </TabNavigator>
        );
    }

componentWillMount(){
        const tabIconColor = this.props.tabIconColor;
        if(Platform.OS === 'ios') {
            Icon.getImageSource('ios-add-circle-outline', 100, theme.tabButton.normalColor).then((source) => this.setState({registerNormal: source}));
            Icon.getImageSource('ios-add-circle-outline', 100, tabIconColor).then((source) => this.setState({registerSelected: source}));
        }else if(Platform.OS === 'android'){
            Icon.getImageSource('md-add-circle-outline', 100, theme.tabButton.normalColor).then((source) => this.setState({registerNormal: source}));
            Icon.getImageSource('md-add-circle-outline', 100, tabIconColor).then((source) => this.setState({registerSelected: source}));
        }
    }

2019/2/6 posted in web

React Native Flexbox 布局

我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

React Native布局基础

一个组件的宽和高决定了他在屏幕的尺寸，也就是大小

像素无关

在React Native中的尺寸是没有单位的，它代表了设备独立像素。

运行在Android上时，View的长和宽被解释成：100dp 100dp单位是dp，字体被解释成16sp 单位是sp，运行在iOS上时尺寸单位被解释称了pt，这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变；

react native 布局详细指南

flexDirection

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // 尝试把`flexDirection`改为`column`看看
      // 设置row的时候元素是按照row方向排列，即可以理解为行排列
      // 设置column的时候元素是按照column方向排列，即可以理解为列排列
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

设置为row的时候

设置为column的时候

这个图片对于四个整理的非常好

JustifyContent

在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class JustifyContentBasics extends Component {
  render() {
    return (
      // 尝试把`justifyContent`改为`center`看看
      // 尝试把`flexDirection`改为`row`看看，针对不同的行列排序可以使用相应的排列方式
      // 这些Style后面部分可以放到专门的样式文件中去
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

flex-start: 从头开始排列
center: 居中排列
flex-end: 从末尾排列

Align Items

在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // 尝试把`alignItems`改为`flex-start`看看
      // 尝试把`justifyContent`改为`flex-end`看看
      // 尝试把`flexDirection`改为`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'stretch',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{height: 50, backgroundColor: 'skyblue'}} />
        <View style={{height: 100, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

使用stretch的话，系统会默认指定当前排列位置上的宽或者高，相应的如果在当前位置已经指定的话，该项作用的stretch就会失效。

align content

2019/2/5 posted in web

React Native 组件

React Native 组件主要分为三种：基础组件、交互组件、列表组件

基础组件

基础组件包含：

View：用于搭建用户组件的最基础组件
Text：用于显示文本的内容
Image：显示图片内容的组件
TextInput：文本显示框
ScrollView：可滚动的容器视图
StyleSheet：提供类似CSS样式表的样式抽象层

View

作为创建 UI 时最基础的组件，View 是一个支持 Flexbox 布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View
        style={{
          flexDirection: "row",
          height: 100,
          padding: 20
        }}
      >
        <View style={{ backgroundColor: "blue", flex: 0.3 }} />
        <View style={{ backgroundColor: "red", flex: 0.5 }} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

用于 View 响应属性 (例如, onResponderMove), 合成触摸事件采用以下的格式:

nativeEvent
- changedTouches - 从上一次事件以来的触摸事件数组。
- identifier - 触摸事件的 ID。
- locationX - 触摸事件相对元素位置的 X 坐标。
- locationY - 触摸事件相对元素位置的 Y 坐标。
- pageX - 触摸事件相对根元素位置的 X 坐标。
- pageY - 触摸事件相对根元素位置的 Y 坐标。
- target - 接收触摸事件的元素 ID.
- timestamp - 触摸事件的时间标记，用来计算速度.
- touches - 屏幕上所有当前触摸事件的数组.
绑定View的触摸响应事件

Text

一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。


import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-native';

export default class TextInANest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titleText: "Bird's Nest",
      bodyText: 'This is not really a bird nest.'
    };
  }

  render() {
    return (
      <Text style={styles.baseText}>
        <Text style={styles.titleText} onPress={this.onPressTitle}>
          {this.state.titleText}{'\n'}{'\n'}
        </Text>
        <Text numberOfLines={5}>
          {this.state.bodyText}
        </Text>
      </Text>
    );
  }
}

const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

这个例子使用了styles 样式分离的方式来制作，显示Text的相关属性。

元素在布局上不同于其它组件：在Text内部的元素不再使用flexbox布局，而是采用文本布局。这意味着内部的元素不再是一个个矩形，而可能会在行末进行折叠。

Image

TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

import React, { Component } from 'react';
import { TextInput } from 'react-native';

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
    );
  }
}

多行文本框

import React, { Component } from 'react';
import { View, TextInput } from 'react-native';

class UselessTextInput extends Component {
  render() {
    return (
      <TextInput
        {...this.props} // 将父组件传递来的所有props传递给TextInput;比如下面的multiline和numberOfLines
        editable = {true}
        maxLength = {40}
      />
    );
  }
}

export default class UselessTextInputMultiline extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'Useless Multiline Placeholder',
    };
  }

  // 你可以试着输入一种颜色，比如red，那么这个red就会作用到View的背景色样式上
  render() {
    return (
     <View style={{
       backgroundColor: this.state.text,
       borderBottomColor: '#000000',
       borderBottomWidth: 1 }}
     >
       <UselessTextInput
         multiline = {true}
         numberOfLines = {4}
         onChangeText={(text) => this.setState({text})}
         value={this.state.text}
       />
     </View>
    );
  }
}

ScrollView

一个封装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

记住ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给ScrollView一个确定的高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。

ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者。

ScrollView和FlatList应该如何选择？ScrollView会简单粗暴地把所有子元素一次性全部渲染出来。其原理浅显易懂，使用上自然也最简单。然而这样简单的渲染逻辑自然带来了性能上的不足。想象一下你有一个特别长的列表需要显示，可能有好几屏的高度。创建和渲染那些屏幕以外的JS组件和原生视图，显然对于渲染性能和内存占用都是一种极大的拖累和浪费。

这就是为什么我们还有专门的FlatList组件。FlatList会惰性渲染子元素，只在它们将要出现在屏幕中时开始渲染。这种惰性渲染逻辑要复杂很多，因而API在使用上也更为繁琐。除非你要渲染的数据特别少，否则你都应该尽量使用FlatList，哪怕它们用起来更麻烦。

此外FlatList还可以方便地渲染行间分隔线，支持多列布局，无限滚动加载等等。

交互空间

Button

import { Button } from 'react-native';
...

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

Picker

本组件可以在iOS和Android上渲染原生的选择器（Picker）。

<Picker
  selectedValue={this.state.language}
  style={{ height: 50, width: 100 }}
  onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

slider

用于选择一个范围值的组件。

switch

跨平台通用的“开关”组件。

这些平台在不同的平台上的定义方式不一样，所以出现的是跨平台的相应组件。

注意这是一个“受控组件”（controlled component）。你必须使用onValueChange回调来更新value属性以响应用户的操作。如果不更新value属性，组件只会按一开始给定的value值来渲染且保持不变，看上去就像完全点不动。

@keyword checkbox @keyword toggle @keyword 单选 @keyword 多选

列表视图

Flatlist

高性能的简单列表组件，支持下面这些常用的功能：

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行（ScrollToIndex）。
如果需要分组/类/区（section），请使用.

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

Sectionlist

高性能的分组(section)列表组件，支持下面这些常用的功能：

完全跨平台。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持分组的头部组件。
支持分组的分隔线。
支持多种数据源结构
支持下拉刷新。
支持上拉加载。
如果你的列表不需要分组(section)，那么可以使用结构更简单的。

简单的例子：

// Example 1 (Homogeneous Rendering)
<SectionList
  renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
  renderSectionHeader={({ section: { title } }) => (
    <Text style={{ fontWeight: "bold" }}>{title}</Text>
  )}
  sections={[
    { title: "Title1", data: ["item1", "item2"] },
    { title: "Title2", data: ["item3", "item4"] },
    { title: "Title3", data: ["item5", "item6"] }
  ]}
  keyExtractor={(item, index) => item + index}
/>