Native-Base не загружает элементы

Я использую родную версию 2.0.2, реактивную версию 0.40.0.

Я следую руководству по созданию поиска репозитория GithHub с использованием native-base и интеграции его с моими функциями, чтобы сделать что-то другое, но все компоненты не загружаются должным образом. Пример заголовка и нижнего колонтитула из документации работал нормально, но когда я добавляю такие вещи, как округленное свойство панели поиска или классы значков, это не отражается.

Когда я добавляю компонент кнопки, я получаю следующую ошибку.

image

Рассматриваемый Кодекс

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;

Я проверил зависимости и все установлено.


person Shaurya Chaudhuri    schedule 08.02.2017    source источник


Ответы (2)


Я думаю, вам следует обернуть свой код в

<Container>
  <Content>
        // your code
      <Button>
         <Text>Click Me! </Text>
        </Button>
   </Content>
</Container>
person Santosh Sharma    schedule 08.02.2017

Я думаю, что что-то не так в твоем Button на onPress. ваш код onPress={()=>this.search()}, но я не вижу search() метода, я просто нахожу perform_search() метод

если ваша проблема возникла после добавления тега <Button>, вы можете изменить его:

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

к этому:

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

а также этот: onSubmitEditing={()=>this.search()}

на этот: onSubmitEditing={()=>this.perform_search()}

и не забудьте импортировать Text в native-base, надеюсь, вы решите вашу проблему :)

person Rizal Sidik    schedule 19.07.2017