简单 React Native 应用程序的不变违规和渲染错误

Question

React Native 新手，如果这是一个新手问题，我们深表歉意。我正在使用 Expo，我的应用程序可以在 Web 上运行，但是当我通过 Expo 使用 iOS 时，我遇到了两个类别的 18 个错误。 Invariant Violation 将在下面详细说明，Render Error。

错误等级 1

Invariant Violation: View config getter callback for component `input` must be a function (received `undefined`). Make sure to start component names with a capital letter.

This error is located at:
    in input
    in Unknown
    in span
    in Unknown
    in div (created by FormGroup)
    in FormGroup (created by App)
    in form (created by Form)
    in Form (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

错误等级 2

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

This error is located at:
    in div
    in div
    in span
    in Unknown
    in div (created by FormGroup)
    in FormGroup (created by App)
    in form (created by Form)
    in Form (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

这是我的代码，在此先感谢！

import React from 'react';

import Amplify from 'aws-amplify';
import config from './src/aws-exports';

import { Text, View } from 'react-native';
import { Button, Form } from 'react-bootstrap';
import RangeSlider from 'react-bootstrap-range-slider';

Amplify.configure(config)

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mood: 1,
      sleep: 3,
      energy: 3,
      clarity: 5,
      social: 2,
      notes: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    console.log("submitted state:", this.state);
  }

  render() {
    return(
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Form>
          <Form.Group>
            <Text>Mood</Text>
              <RangeSlider
                value={this.state.mood}
                onChange={(e) => this.setState({mood: e.target.value})}
                min={1}
                max={5}/>
            <Text>Sleep</Text>
              <RangeSlider
                value={this.state.sleep}
                onChange={(e) => this.setState({sleep: e.target.value})}
                min={1}
                max={5}/>
            <Text>Energy</Text>
              <RangeSlider
                value={this.state.energy}
                onChange={(e) => this.setState({energy: e.target.value})}
                min={1}
                max={5}/>
            <Text>Clarity</Text>
              <RangeSlider
                value={this.state.clarity}
                onChange={(e) => this.setState({clarity: e.target.value})}
                min={1}
                max={5}/>
            <Text>Social</Text>
              <RangeSlider
                value={this.state.social}
                onChange={(e) => this.setState({social: e.target.value})}
                min={1}
                max={5}/>
            <Text>Check-in Notes</Text>
              <Form.Control 
                as="textarea"
                rows={3}
                value={this.state.notes}
                onChange={(e) => this.setState({notes: e.target.value})}/>
          </Form.Group>
        </Form>
        <Button onClick={this.handleSubmit}>Submit</Button>
      </View>
    );
  }
}

export default App;

Answer 1

我认为这是因为您使用的是import { Button, Form } from 'react-bootstrap';。那可能与 react native 不兼容？

也许试试react-native-paper 之类的东西？