表单标签未显示在cardview中

Question

我正在用Reactnative构建一个应用程序，在那里我有一个卡片上的表单。卡片来自React-Native-Element表单来自Formik，所以我可以用它进行验证，因为我对React-Native非常陌生，我不知道为什么，但当我使用formik时，我的表单不会显示在我的卡片视图中，但当我使用来自native-base的表单时，它工作起来没有任何问题。我正在使用expo运行我的应用程序，没有错误，至少没有我理解的错误。有没有人可以看一眼，给我一个指针

我的代码

 <Card title="Listen Name">
    <View style={{ flexDirection: "row" }}>
      <View>
        <TouchableOpacity style={styles.imagePicker}>
          <Icon name={"image"} size={30} color="#01a699" />
        </TouchableOpacity>
      </View>
      <View>
        <Text style={{ marginTop: 30, marginLeft: 30 }}>
          Optionale Eingabe Bild
        </Text>
      </View>
    </View>
    <View>
      <Formik>
        <Form>
          {" "}
          <Input
            placeholder="Listen Name hinzufügen"
            rounded
            right
            icon="list"
            family="Feather"
            iconSize={25}
            iconColor="black"
          />
          <Input
            placeholder="Mitglieder Hinzufügen"
            rounded
            right
            icon="team"
            family="antdesign"
            iconSize={25}
            iconColor="black"
          />
        </Form>
      </Formik>
    </View>
    <Divider />

    <View style={{ marginLeft: 120, flexDirection: "row" }}>
      <View>
        <Button
          round
          uppercase
          color
          color="error"
          style={styles.button2}
          onPress={() => props.navigation}
        >
          <Label style={(styles.font, styles.buttonText)}>Abbrechen</Label>
        </Button>
      </View>
      <View>
        <Button round uppercase color color="#000" style={styles.button}>
          <Label style={(styles.font, styles.buttonText)}>Speichern</Label>
        </Button>
      </View>
    </View>
  </Card>

日志数据

    Text strings must be rendered within a <Text> component.

Stack trace:
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4137:14 in <anonymous>
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4134:2 in createTextInstance
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15909:12 in completeWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
  [native code]:null in renderRoot
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
  [native code]:null in runRootCallback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
  node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18796:28 in batchedUpdates$1
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2709:30 in batchedUpdates
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2794:17 in batchedUpdates$argument_0
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2870:28 in receiveTouches
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
  [native code]:null in callFunctionReturnFlushedQueue
  ...
ERROR
19:18
Warning: %s: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary

Stack trace:
  node_modules\react-native\Libraries\YellowBox\YellowBox.js:63:8 in console.error
  node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:645:36 in warningWithoutStack
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18056:16 in callback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7595:16 in callCallback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7639:19 in commitUpdateEffects
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7630:22 in commitUpdateQueue
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17116:10 in commitLifeCycles
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20002:23 in commitLayoutEffects
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19768:10 in commitRootImpl
  [native code]:null in commitRootImpl
  node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19590:4 in commitRoot
  [native code]:null in commitRoot
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
  [native code]:null in runRootCallback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
  node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18796:28 in batchedUpdates$1
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2709:30 in batchedUpdates
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2794:17 in batchedUpdates$argument_0
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2870:28 in receiveTouches
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
  [native code]:null in callFunctionReturnFlushedQueue
  ...

Answer 1

https://codesandbox.io/s/react-native-formik-cardview-test-i9yrb?file=/src/App.js

请检查我为您的代码编写的这个codesandbox。我认为，它是有效的。您是否正确导入了模块？