React-Native组件导入问题

Question

我是React-Native的新手。从你的教程开始，我在我的代码中尝试了同样的事情，但是遇到了问题。 我刚刚从'react-native'导入了“KeyboardAvaoidingView”，并用“KeyboardAvoidingView”替换了顶部的“View”，我收到了错误。如果我回滚到“View”应用程序开始运行。 任何帮助将不胜感激。

import React, {Component} from 'react'
import {  
  StyleSheet,
  Text,
  KeyboardAvoidingView,
  View,
  Image,

} from 'react-native';

import LoginForm from './LoginForm';

export default class Login extends Component {

  render() {
    return (
      <KeyboardAvoidingView style={styles.container} behavior="padding">
        <View style={styles.logContainer} >
             <Image style={styles.logo} 
                source={require("../images/yeti-logo.jpg")}
                />   
            <View style={styles.heading}>
              <Text style={styles.textHeading}>
                Hello World
              </Text>
            </View>
        </View>  
        <View style={styles.formContainer}>
          <LoginForm />
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#039be5',
  },
  logContainer: {
    justifyContent:'center',
    alignItems: 'center',
    flex:1
  },
  logo:{
    width:300,
    height:200
  },
  heading:{
    backgroundColor: '#7cb342'
  },
  textHeading:{
    color:'#ffffff',
    width: 300,
    textAlign: 'center',

  },
  formContainer:{
  }
})

错误：

LoginForm代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
} from 'react-native';


export default class LoginForm extends Component {

  render() {
    return (
      <View style={styles.container}>                
        <TextInput             
            style={styles.input}
            placeholder="username or email"
            placeholderTextColor="rgba(255,255,255,0.7)"
          />        
        <TextInput 
          secureTextEntry
          style={styles.input}
          placeholder="Password"
          placeholderTextColor="rgba(255,255,255,0.7)"
          />     
        <TouchableOpacity style={styles.buttonContainer}>
          <Text style={styles.buttonText}>Login</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {  
    padding:20
  },
  input:{
    height:40,
    marginBottom:15,
    backgroundColor:'rgba(255,255,255,0.2)',
    color:'#fff',
    paddingHorizontal: 10
  },
  buttonContainer:{
    backgroundColor: '#2980b9',
    paddingVertical:15
  },
  buttonText:{
    textAlign: 'center',
    color: '#FFFFFF',
    fontWeight:'700'
  }

});

应用程序的代码结构：

Answer 1

'review_text'    'review_label'
 review_1         positive
 review_2         negative

  

这是工作示例

，您可以复制并粘贴它。会工作的 如果您想将其与后端Rest-API连接 使用axios或获取

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView
} from 'react-native';


export default class LoginForm extends Component {
 constructor(props){
 super(props);
 this.state={
 username:'',
 password:''
 }
}
     login=()=>{
     alert('Username: ' + this.state.username + ' Password: ' + this.state.password );
     }
  render() {
    return (

      <KeyboardAvoidingView behavior="position" enabled>  
      <View style={styles.container}>              
        <TextInput             
            style={styles.input}
            placeholder="username or email"
            onChangeText={(username) => this.setState({username})}
            placeholderTextColor="rgba(255,255,255,0.7)"
          />        
        <TextInput 
          secureTextEntry
          style={styles.input}
          placeholder="Password"
          onChangeText={(password) => this.setState({password})}
          placeholderTextColor="rgba(255,255,255,0.7)"
          />     
        <TouchableOpacity style={styles.buttonContainer} onPress={()=>this.login()}>
          <Text style={styles.buttonText}>Login</Text>
        </TouchableOpacity>
      </View>
</KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {  
    flex:1
  },
  input:{
    height:40,
    marginBottom:15,
    backgroundColor:'rgba(255,255,255,0.2)',
    color:'#fff',
    paddingHorizontal: 10
  },
  buttonContainer:{
    backgroundColor: '#2980b9',
    paddingVertical:15
  },
  buttonText:{
    textAlign: 'center',
    color: '#FFFFFF',
    fontWeight:'700'
  }

});