1

我使用的是原生版本 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;

我检查了依赖项并安装了所有内容。

4

2 回答 2

2

我认为您应该将代码包装在

<Container>
  <Content>
        // your code
      <Button>
         <Text>Click Me! </Text>
        </Button>
   </Content>
</Container>
于 2017-02-08T14:08:22.677 回答
0

我觉得你的Buttonon有问题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希望可以解决您的问题:)

于 2017-07-19T12:01:21.860 回答