React Native：検索、フィルタ、ベースビューをすべて1つのルートで表示

Question

Messenger（Mobile App）検索機能のようなものが出てくるのですか？ルートには基本的なビュー要素があります。ユーザーが何らかの単語を入力すると、検索が機能し始め、同じ画面内で別のビューが重なり、フィルタリストが表示されます。私はreact-native-overlapモジュールを使用しようとしましたが、うまく動作しません。

var React = require ('react-native'); 
var { 
    Text, View, StyleSheet, TextInput, Dimensions, Image, Platform, ScrollView, ReactNative, DeviceEventEmitter,TouchableOpacity 
} = React; 
var NavigationBar = require ('../Components/NavigationBar'); 
var SearchBarFromNodeModule = require ('react-native-search-bar'); 
var Overlay=require('react-native-overlay'); 

var Recent = React.createClass({ 

getInitialState(){ 
    return { 
    isVisible:'aa', 
    }; 
}, 

onNameChanged(e){ 
    //todo something here 
// alert('asd'); 
}, 

render(){ 
return (
    <View> 
    <View style={styles.navbarContainer}> 
    <SearchBarFromNodeModule ref='searchBar' placeholder='Search' showsCancelButton={true} onChange={this.onNameChanged} /> 
    </View> 
    <View style={{flex:1, flexDirection:'column'}}> 
    <View style={{backgroundColor:'#F4FA58',flex:1,height:40}}/> 
    <View style={{backgroundColor:'#58FAF4',flex:1,height:40}}/> 
    <View style={{backgroundColor:'#F4FA58',flex:1,height:40}}/> 
    <View style={{backgroundColor:'#58FAF4',flex:1,height:40}}/> 
    <View style={{backgroundColor:'#F4FA58',flex:1,height:40}}/> 
    <View style={{backgroundColor:'#58FAF4',flex:1,height:40}}/> 
    </View> 
    </View> 
    ); 
}, 
}); 

var styles=StyleSheet.create({ 
    navbarContainer: { 
    height: 65, 
    paddingTop: 20, 
    }, 
    button:{ 
    height:40, 
    textAlign:'center', 
    fontSize:18, 
    marginBottom:10, 
    marginTop:10, 
    color:'blue', 
    }`enter code here` 
}); 

module.exports = Recent; 

検索バーの後ろに、ユーザーが何かを入力しているときに色のボックスがあり、onChange機能が実行されます。しかし、私はどのようにカラーボックスを重ねるのか分かりません。

Answer 1

これは主に仕事をします。唯一の問題は、検索結果ボックスが検索入力の下のテキストビューの下にレンダリングされることです。これはいくつかの点で修正することができますが、私は個人的にはすぐに出てくる0.30で導入されたzIndex機能を見ています。

https://rnplay.org/apps/CJNPWg

import React from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TextInput 
} from 'react-native'; 

class SearchResults extends React.Component { 
    render() { 
    if (this.props.search.toUpperCase() !== 'BAM') { 
     return null; 
    } 

    return (
     <View style={styles.searchResults}> 
     <Text> 
      Do whatever your heart desires here... Might I recomend a list view?? 
     </Text> 
     </View> 
    ); 
    } 
} 

class SearchBox extends React.Component { 
    render() { 
    return (
     <View> 
     <TextInput 
      style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
      value={this.props.search} 
      onChangeText={this.props.onChange} 
      placeholder="Try 'BAM'!" 
     /> 
     <SearchResults search={props.search} /> 
     </View> 
    ); 
    } 
} 

class SampleApp extends React.Component { 
    state = { 
    currentSearch: '' 
    }; 

    onCurrentSearchChange(text) { 
    this.setState({ 
     currentSearch: text 
    }); 
    } 

    render() { 
    return (
    <View style={styles.container}> 
     <Text>Enter your search</Text> 
     <SearchBox search={this.state.currentSearch} onChange={this.onCurrentSearchChange.bind(this)} /> 
     <Text>Some text below the search box...</Text> 
    </View> 
    ); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    paddingTop: 30 
    }, 
    searchResults: { 
    position: 'absolute', 
    backgroundColor: 'white', 
    borderColor: 'black', 
    borderWidth: 1 
    } 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp);