从可搜索的标题中获取文本以进行查看

时间:2018-06-01 23:02:20

标签: react-native react-navigation stack-navigator

我在屏幕上覆盖StackNavigator的标题使用react-native-material-ui来创建一个可搜索的标题,但我无法从标题中的输入文本中获取数据到屏幕上的视图onChangeText函数

搜索地方标题代码

此组件有一个标题,其中包含来自react-native-material-ui的输入文本,它在SearchPlace屏幕的RootNavigator标题中调用

 import React, { Component } from 'react';
    import { View, Image,Text,StyleSheet } from 'react-native';
    import { ThemeProvider,Toolbar } from 'react-native-material-ui';
    export default class SearchPlace  extends Component{

      constructor(props){
          super(props)
          this.state = {
            text: ''
          }}


        render(){
            return(

                 <ThemeProvider>
        <View style={styles.pageContainer}>
          <Toolbar

            leftElement="arrow-back"
            centerElement="Search a Place"
            searchable={{
                onChangeText:(keyword) =>{this.state.text=keyword},
              autoFocus: true,
              placeholder: 'Search',
            }}
          />
        </View>
      </ThemeProvider>
                );
        }



    } 
    const styles = StyleSheet.create({


       containe: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',

      },
    });

RootNavigator

 import { StackNavigator } from 'react-navigation';
import React, { Component } from 'react';
import SearchPlace from 'taxi/Screen/SearchPlace/SearchPlace.js';
import SearchBox from 'taxi/components/SearchBox/SearchBox.js'
import App from './App';
import SearchHeader from 'taxi/components/header/SearchHeader.js';
const RootNavigator = StackNavigator({
  App: {screen: App},

  SearchPlace: {screen: SearchPlace,
   navigationOptions :{
                    header:(<SearchHeader></SearchHeader>),
                }},
});

export default RootNavigator;

搜索屏幕

 import React ,{Component} from 'react';
import {Text } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import {List,ListItem,View,Left} from 'native-base';
import styles from './SearchResultsStyles.js'; 
export default class SearchPlace  extends Component{
    render(){
        return(

                <View style={styles.searchResultsWrapper}>

                    <List>
                        <ListItem>
                            <Left  style={styles.leftContainer}>
                                <Icon style={styles.leftIcon} name="map-marker"/>
                                <Text> **i need the text her from the header input**</Text>
                            </Left>

                        </ListItem>


                    </List>


                </View>


            );
    }

} 

enter image description here

0 个答案:

没有答案