Question

我正在尝试将比萨饼图标移动到搜索栏的右侧。

我不仅无法将搜索比萨饼图标移动到搜索栏的右侧，而且根本无法移动它。

该主比萨饼图标在MainPage中显示为：

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import axios from 'axios';
import Card from './Card'
import NewCard from './NewCard'

export default class MainPage extends Component {
  constructor(props) {
    super(props)
    this.createLibrary = this.createLibrary.bind(this)
    this.state = {
        librarys: []
    }
  }

  componentDidMount() {
    axios.get('http://localhost:3000/libraries')
      .then(res => {
        const librarys = res.data;
        this.setState({ librarys: librarys });
        console.log(this.state.librarys)
      })
  }

  //Create card
  createLibrary(library) {
    axios.post('http://localhost:3000/libraries', { library })
      .then(res => {
        this.updateLibrary(library)
      })
  }
  updateLibrary(library){
    let newLibrarys = this.state.librarys.filter((f) => f.id !== library.id)
    newLibrarys.unshift(library)
    this.setState({
      librarys: newLibrarys
    })
  }

  render() {

    return (
      <View>
        <NewCard 
              createLibrary={this.createLibrary}
              style={{position: 'absolute',
              left: 20,
              top: 20}}
          />
        <Card style={{justifyContent: 'flex-end'}} librarys={this.state.librarys}/>
      </View>
    );
  }
}

这是新的卡片组件：

import React, { Component } from 'react';
import { Text, View, TextInput, Dimensions } from 'react-native';
import { Header, Form, Item, Input, Icon, Button } from "native-base";

export default class MainPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '',
      desc: '',
      markdown: '',
      showHide: 'none'
    }
  }

  submitForm = () => {
    let title = this.state.title
    let desc = this.state.desc
    let markdown = this.state.markdown
    let library = {title: title, desc: desc, markdown: markdown}
    this.props.createLibrary(library)
  }

  showForm = () => {
    this.state.showHide === 'none' ?
    this.setState({showHide: 'flex'}) :
    this.setState({showHide: 'none'})
  }


  render() {

    const formStyle = {
      display: this.state.showHide,
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height
    }

    return (
      <View>


        <Icon
          name='pizza'
          onPress={this.showForm}
          style={{display: this.state.showHide === 'none' ? 'flex' : 'none'}}
        />

        <Form style={formStyle} >
            <Item>
              <Input 
                placeholder="Title"
                name="title"
                onChangeText={(value) => this.setState({title: value})}
              />
            </Item>

            <Item>
              <Input
                placeholder="Description"
                name="desc"
                onChangeText={(value) => this.setState({desc: value})}
              />
            </Item>

            <Item>
              <Input
                placeholder="Markdown"
                name="markdown"
                onChangeText={(value) => this.setState({markdown: value})}
              />
            </Item>
            <Button
              light
              onPress={this.submitForm.bind(this)}
            >
              <Text>  Submit  </Text>
            </Button>

          </Form>
        </View>
    );
  }
}

搜索栏在卡片组件中：

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Header, Form, Item, Input, Icon, Button, Accordion } from "native-base";

export default class MainPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      activeIndex: null,
      search: '',
      sortCards: "newest",
      search: ''
    }
  }



  render() {

    var filteredCards = this.props.librarys.filter(
      (library) => {
          return library.title.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 || library.desc.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
    })

    const dataArray = filteredCards.map(
      (library) => {
        return {title: library.title, content: library.desc}
      }
    )


    return (
      <View>

        <Header searchBar rounded>
          <Item>
            <Icon name="ios-search" />
            <Input placeholder="Search"
              onChangeText={(value) => this.setState({search: value})}
            />
            <Icon name="ios-people" />
          </Item>
          <Button transparent>
            <Text>Search</Text>
          </Button>
        </Header>

        <Accordion dataArray={dataArray} expanded={0}/>

      </View>
    );
  }
}

我尝试了内联样式的不同排列，但是似乎都不起作用。我对React非常熟悉，但是我是React Native的新手。

编辑：这是我目前的样式：

    return (
      <View>
        <NewCard 
              createLibrary={this.createLibrary}
              style={{
                position: 'relative',
                left: 20,
                top: 20,
                zIndex: 1
              }}
          />
        <Card style={{justifyContent: 'flex-end', position: 'absolute', zIndex: 0}} librarys={this.state.librarys}/>
      </View>
    );
  }
}

Answer 1

在此处使用带有“行”方向的嵌套视图很有用。

<view style={{flex:1}}>
    <view style={{flexDirection:"row"}} >
        <Searchabr/>
        <Icon/>
        ...
    </view>
</view>

Answer 2

如果要放在其他项目上，则必须将position: relative设置为父项，并将position: absolute设置为图标。完成此操作后，您现在可以相应地使用top，left，right，bottom和z-index属性放置它。

使用内联样式在React Native中定位组件

2 个答案: