Éléments ne chargeant pas de base native

Question

J'utilise la version native 2.0.2, version-0.40.0 native.

Je suis un tutoriel pour faire un GithHub Repo Search utilisant native-base & l'intégrer avec mes fonctionnalités pour faire quelque chose de différent, mais tous les composants ne sont pas correctement chargés. L'en-tête & L'exemple de pied de page des documentations fonctionnait correctement, mais lorsque j'ajoutais des éléments tels que la propriété arrondie de la barre de recherche ou les classes d'icônes, cela ne se reflétait pas.

Lorsque j'ajoute le composant bouton, j'obtiens l'erreur suivante.

Le code en question est

var constants = require("../constants") 

var React = require('react'); 
var ReactNative = require('react-native'); 
var t = require('tcomb-form-native'); 

var authenticate = require("../services/authenticate") 

import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body,Picker,InputGroup,Icon,Input,Item } from 'native-base'; 

var { 
    AppRegistry, 
    AsyncStorage, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
    Alert, 
    ListView, 
    Image, 
} = ReactNative; 

var Form = t.form.Form; 
var getFeatured = require("../services/get_featured"); 
var getCategory = require("../services/get_categories"); 
var search = require("../services/search"); 

var Query; 


const options = { 
    fields: { 
     category: { 
      order: 'asc', 
      nullOption: {value: '', text: 'Anything'} 
     } 
    } 
} 

class SplashPage extends React.Component{ 

    constructor() { 
    super(); 
    this.set_initial_state() 
    //this.set_categories(); 
    //this.get_featured(); 
    } 

    set_initial_state(){ 
     this.state ={ 
      hasResult: false, 
      hasCategory:false, 
      noResult: false, 
      isLoading: true, 
      isLoadingCat:true, 
      searchResult:false, 
      categories : [], 
      searchText:"", 
      searchCat:"", 
      filterCat:"", 
      articles:[], 
     } 
    } 

    set_categories() { 
    var par = this; 
    getCategory().then(function(catData){ 
     par.setState({ 
     isLoadingCat:false, 
     hasCategory:true, 
     categories:catData, 
     }); 

     console.error("till here"); 

    }); 

    } 

    get_categories(){ 
    const cats = this.state.categories; 
    const CatItems = cats.map((cat,i)=>{ 
     return (
     <Picker.item key={i} label={cat} value={cat} /> 
    ); 
    }); 
    return CatItems; 

    } 

    openRecipe(data){ 
    this.props.navigator.push({ 
     id: 'RecipePage', 
     name: 'Recipe',  
     recipe_id:data.id, 
    }); 
    } 

    get_featured(){ 
    var par = this; 
    getFeatured().then(function(articles){ 
     par.setState(
      { 
       articles:articles, 
       hasResult: true, 
       isLoading:false, 
       searchResult:false, 
      } 
     ) 
    }).catch(function(error) { 
     console.error(error); 
    }); 

    } 

    perform_search(){ 
    var value = this.state.searchText; 
    var par = this; 
    if(value){ 
     par.setState(
      { 
       hasResult: false, 
       isLoading:true, 
      } 
     ) 

     var category = value.category; 
     var ingredient = value.ingredient.toString().split(',').join(' '); 
     search(ingredient,category).then((articles) => { 
     par.setState(
      { 
       articles:articles, 
       hasResult: true, 
       isLoading:false, 
       searchResult:true 
      } 
     ) 
     }).catch(function(error) { 
     console.error(error); 
     }); 

     } 
    } 

    render() { 

    return (

     <Header searchBar rounded>        
    <InputGroup>       
     <Icon name="ios-search" />       
     <Input placeholder="Search" value={this.state.searchText} onChangeText={(text) => this.setState({searchText:text})} onSubmitEditing={()=>this.search()}/> 
     <Picker 
         iosHeader="Select one" 
         mode="dropdown" 
         selectedValue={this.state.searchCat} 
         onValueChange={(cat) => this.setState({searchCat:cat})}> 

         <Item label="Cats" value="key0" /> 
         <Item label="Cats2" value="key02" /> 

     </Picker> 
    </InputGroup>      
    <Button transparent onPress={()=>this.search()}>Go</Button>     
</Header> 


    ); 
    } 
} 

module.exports = SplashPage; 

J'ai vérifié les dépendances et tout est installé.

Answer 1

Je pense que vous devriez envelopper votre code dans

<Container> 
    <Content> 
     // your code 
     <Button> 
     <Text>Click Me! </Text> 
     </Button> 
    </Content> 
</Container> 

Answer 2

il y a quelque chose de mal, je pense que dans votre Button sur onPress. votre code est onPress={()=>this.search()} mais je ne vois pas la méthode search(), je trouve perform_search() méthode

si votre problème est venu après avoir ajouté <Button> tag, vous pouvez changer celui-ci:

<Button transparent onPress={()=>this.search()}>Go</Button> 

à celui-ci :

<Button transparent onPress={()=>this.perform_search()}><Text>Go</Text></Button> 

et aussi celui-ci: onSubmitEditing={()=>this.search()}

à celui-ci: onSubmitEditing={()=>this.perform_search()}

et ne pas oublier d'importer Text dans native-base, l'espoir peut résoudre votre problème :)