Native-Base不加载元素-Java 学习之路

我使用的是native-base version 2.0.2，react-native version 0.40.0 .

我正在按照教程使用native-base进行GithHub Repo Search并将其与我的功能集成以使其不同，但所有组件都未正确加载 . 文档中的页眉和页脚示例工作正常，但是当我添加搜索栏舍入属性或图标类等内容时，它不会被反映出来 .

当我添加按钮组件时，我收到以下错误 .

有问题的守则是

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;

我检查了依赖项，一切都已安装 .

2 回答

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

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

回复于 2024-05-21T09:42:30+08:00

0
我认为 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()}

并且不要忘记在 native-base 导入 Text ，希望能解决你的问题:)
回复于 2024-05-21T09:42:30+08:00

Native-Base不加载元素

2 回答

相关问题