How to use the antd-mobile.Flex.Item function in antd-mobile

title: 'Name', dataIndex: 'key', key: 'key'
}, {
  title: 'Value', dataIndex: 'value', key: 'value'
}];

interface StorageVal {
  key: string;
  value: string;
  children?: StorageVal[]
}

interface State {
  data: StorageVal[]
}

const FlexItem = Flex.Item

export default class Storage extends PureComponent{
  constructor(props: any) {
    super(props);
    this.state = {
      data: [{
        key: 'cookie', value: ''
      },
      {
        key: 'localStorage', value: ''
      }]
    }
  }
  componentDidMount() {
    this.setData()
  }

import React from 'react';
import PropTypes from 'prop-types';
import { Flex } from 'antd-mobile';
import styled from 'styled-components';
import { List } from 'react-virtualized';

import { colors } from '@styles/theme';

const Wrapper = styled(Flex)`
  width: 100%;
  padding: 5px 0;
  background: #fff;
`;

const StyledCell = styled(Flex.Item)`
  padding: 8px 26px;
  border-bottom: 1px solid ${colors.white};
  text-align: center;
`;

const teamStatsKeys = [
  { abbr: 'FG%', key: 'field_goals_percentage' },
  { abbr: '3P%', key: 'three_pointers_percentage' },
  { abbr: 'FT%', key: 'free_throws_percentage' },
  { abbr: 'AST', key: 'assists' },
  { abbr: 'REB', key: '' },
  { abbr: 'STL', key: 'steals' },
  { abbr: 'BLK', key: 'blocks' },
  { abbr: 'TOV', key: 'turnovers' },
  { abbr: 'FOUL', key: 'fouls' },
];

import React, { PureComponent } from 'react';
import { Flex } from 'antd-mobile';
import HTMLTree from '../../components/htmlView/htmlTree';

const FlexItem = Flex.Item;

interface Props {
  togglePane: () => void;
}

export default class Element extends PureComponent {
  constructor(props: any) {
    super(props);
  }
  render() {
    return (
      
        
          <div style="{{">
            {document &amp;&amp; document.documentElement ? </div>

import React, { createRef, Component } from 'react';
import { Flex, ActionSheet, List, SearchBar, Toast } from 'antd-mobile';
import { DataView } from '../../components/logView/';
import { logStore } from '../store';
import { LogType } from '../store/log';
import { observer } from 'mobx-react';

const FlexItem = Flex.Item;
const ListItem = List.Item;

interface Props {
  togglePane: () => void;
  logList: LogType[]
}

interface State {
  searchVal: string
}

@observer
export default class Log extends Component {
  private searchBarRef = createRef()
  constructor(props: any) {
    super(props);

dataIndex: 'method',
    key: 'method21212',
  },
  {
    title: 'Status',
    dataIndex: 'status',
    key: 'status21212',
  },
  {
    title: 'Time',
    dataIndex: 'time',
    key: 'time12121',
  }
];

const FlexItem = Flex.Item;

interface ReqData {
  url: string;
  method: string;
  status: string;
  header: string;
  time: string;
  response: any;
  request: any;
}

interface State {
  reqList: { [propName: string]: ReqData; };
}

export default class Network extends PureComponent {

import { StickyTable, Row, Cell } from 'react-sticky-table';
import styled from 'styled-components';
import { getMainColor } from 'nba-color';

import { colors } from '../../styles/theme';

const Wrapper = styled(Flex)`
  width: 100%;
  overflow-y: scroll !important;

  ::-webkit-scrollbar {
    display: none;
  }
`;

const Item = styled(Flex.Item)`
  width: 100%;
  margin: 0 !important;
`;

const HeaderCell = styled(Cell)`
  padding: 8px 14px;
  background: ${colors.darkBlue};
  color: #fff;
  font-weight: 600;
  text-align: center;
`;

const StyledCell = styled(Cell)`
  width: ${props => props.width}px;
  padding: 6px 14px;
  border-bottom: 1px solid ${colors.white};

const Wrapper = styled.div`
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 30px;
  padding: 4px 7px;
  background-color: ${colors.darkBlue};
  color: ${colors.white};
`;

const Button = styled(Icon)`
  cursor: pointer;
`;

const Item = styled(Flex.Item)`
  margin-left: 0 !important;
  text-align: center;
`;

const Date = styled.p`
  font-size: 15px;
`;

const DateSelector = ({ date, addDay, subDay }) => (
  
    
      <button type="left">
      
        {formatDate(date)}
      
      </button><button type="right"></button>

import React, { PureComponent } from 'react';
import { Flex, List } from 'antd-mobile';

const FlexItem = Flex.Item;
const ListItem = List.Item;


export default class System extends PureComponent {
  render() {
    const Ua = navigator.userAgent;
    const { href: Href } = window.location;
    const msg = {
      Href,
      Ua
    };
    const list: React.ReactNodeArray = [];
    for (const key in msg) {
      if (msg.hasOwnProperty(key)) {
        const val = msg[key];
        if (val) {

width: 100%;
  overflow-y: scroll !important;
  border-top: 1px solid ${colors.white};
  border-bottom: 1px solid ${colors.white};
  background: #fff;
`;

const Row = styled(Flex)`
  flex: 1;
  width: 100%;
  padding: 10px 15px;
  border-top: 1px solid ${colors.white};
  border-bottom: 1px solid ${colors.white};
`;

const Column = styled(Flex.Item)`
  margin: 0 !important;
  text-align: ${props => props.align};
`;

const Table = ({ home, visitor }) => (
  
    {R.map(
      key => (
        
          
            <p>{home[key]}</p>
          
          
            <b>
              <p>
                {key === 'plus_minus'</p></b>