@uiw/react-native/lib/Form/formItems.js

UIW for React Native

import React, { useContext } from 'react';
import { isObjectEmpty } from './utils/is';
import { Context } from './hooks/context';
import Label from './comps/label';
import Tip from './comps/tip';
import FormList from './formList';
import Container from './comps/container';
import { View } from 'react-native';
import styles from './styles';
const FormItems = ({
  schema = []
}) => {
  const {
    mode,
    innerMethods: {
      store = {},
      updateStore,
      innerValidate
    },
    watch,
    customComponentList,
    changeValidate
  } = useContext(Context);
  const change = (field, value) => {
    updateStore?.({
      store: {
        ...store,
        [field]: value
      }
    });
    watch && watch[field]?.(value);
  };
  const _renderComponent = v => {
    if (v.type === 'cardList') {
      return <FormList formListValue={v} />;
    }
    // 自定义组件
    if (!isObjectEmpty(customComponentList) && Object.keys(customComponentList).includes(v.type)) {
      return React.isValidElement(customComponentList[v.type]) ? React.cloneElement(customComponentList[v.type], {
        ...v,
        ...v.attr,
        value: store[v.field],
        onChange: value => {
          change(v.field, value);
          if (changeValidate) innerValidate();
        }
      }) : null;
    }
    return null;
  };
  const _render = () => {
    return schema.map((v, i) => {
      if (v.hide) {
        return null;
      }
      return <View key={i} style={styles.form_items_container}>
          <View style={[styles.form_items]}>
            <Label v={v} />
            {_renderComponent(v)}
            <Tip v={v} />
          </View>
        </View>;
    });
  };
  return <Container mode={mode}>{_render()}</Container>;
};
export default FormItems;