问简单React本机应用程序的不变冲突与渲染错误

EN

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

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;