Question

首先，对我的问题的标题是否引起误解表示歉意-我不确定我要描述的效果是否实际上称为“覆盖”。我正在寻求创建许多标准应用程序中常见的功能。当TextInput聚焦并且搜索结果/建议仅出现在字段下方但有效地“向下”冲洗整个屏幕时，就会发生这种情况。我要实现的就是这种“冲洗” /“覆盖”效果。请参见下面的图片以获取插图：

在对TextInput进行聚焦之前，它将与屏幕下方/上方的其他组件一起出现在屏幕上。聚焦TextInput之后，是否有新视图？（搜索/过滤器/建议的）出现并“冲洗”下面的组件。

当TextInput焦点被移开（onBlur）时，原来的视图/屏幕（包含所有组件）的“冲洗”消失了，等等。

注意：这不是我要进行的过滤，而是覆盖整个屏幕（TextInput下方所有内容）的新View的效果。

我尝试使用下面的代码来实现这种效果。我什至尝试调整覆盖图视图的边距，但是在所有情况下，结果看起来都是“ hacky”，前后不一致且不可预测，而且并非完全相同。

import React, { Component } from 'react';
import { Text,TextInput,View,FlatList,List,TouchableOpacity,SafeAreaView} from 'react-native';


export default class Demo extends Component<>{
  constructor(props) {
    super(props);
    this.state = { 
        visibility:false,
        data:[{id:0,name:'Foo'},{id:0,name:'Bar'},{id:0,name:'FooFoo'},{id:0,name:'BarBar'},{id:0,name:'FooBar'},],
        value:'',
    }
  }

  showSearcList=()=>{ this.setState({ visibility: true }); }
  hideSearchList=()=>{ this.setState({ visibility: false }); }
  setItem = (item) => { this.setState({value:item.name}); this.hideSearchList();}

  render(){
    return (
    <SafeAreaView style={{flex:1,flexDirection:'column',zIndex:1,margin:'5%'}}>
      <View>
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1,margin:10,}}
          value={this.state.value}
          placeholder='Enter Text'
          onFocus={()=>this.showSearcList()}
          onBlur={()=>this.hideSearchList()}
        />        
      </View>
      

      { this.state.visibility ?
      <View style={{ flex:1,zIndex:3,backgroundColor:'grey',position:'absolute' }}>
          <View>          
            {
            this.state.data.map((item, index) => (
              <TouchableOpacity key = {item.id} style={{backgroundColor:'grey'}} onPress = {() => this.setItem(item)}>
                <Text> {item.name} </Text>
              </TouchableOpacity>
            ))
            }
          </View>
      </View>
      : null
      }
      <View style={{ flex:1,zIndex:1,backgroundColor:'blue'}}>
        <Text>Other component A</Text>
      </View>
      <View style={{ flex:1,zIndex:1,backgroundColor:'red'}}>
        <Text>Other component B</Text>
      </View>
      <View style={{ flex:1,zIndex:1,backgroundColor:'green' }}>
        <Text>Other component C</Text>
      </View>
    </SafeAreaView>
    )
  }
}

由于这是一个相当普遍的功能，因此必须有一种实现效果的标准/合法方式。有人可以建议我如何达到上述效果吗？谢谢

React Native-如何在其他组件上创建覆盖？

0 个答案: