使用內聯樣式在React Native中定位組件

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: absolute父親的position: relative position: absolute和設置position: absolute圖標的position: absolute 。 完成此操作后，您現在可以使用top，left，right，bottom和z-index屬性進行相應的放置。