Native-Base不加载元素

Question

我使用的是原生基础版本2.0.2，react-native版本0.40.0。

我正在遵循一个教程，使用原生基础进行GithHub回购搜索，并将其与我的功能集成，以使一些不同的东西，但所有的组件都没有正确加载。文档中的页眉和页脚示例运行良好，但当我添加诸如搜索栏四舍五入属性或图标类之类的内容时，它没有得到反映。

当我添加按钮组件时，我得到以下错误。

​

​

有问题的代码是

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;

我检查了依赖项，一切都安装好了。

Answer 1

我认为你应该把你的代码包装在

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

Answer 2

我觉得你onPress上的Button出了点问题。您的代码是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()}

别忘了在native-base中导入Text，希望能解决你的问题:)