与内联样式的反应本机中的位置组件

Question

我正在尝试将披萨图标移至搜索栏的直接。

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

此主要披萨图标在主页上为：

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非常熟悉，但我是新手反应本地的。

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

    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。一旦执行此操作，您现在就可以使用顶部，左，右，底部和Z-Index属性将其放置。