Как мы можем перебрасывать данные из TextInput заголовка на onChangeText в реагировать родной? - PullRequest
0 голосов
/ 06 марта 2019

У меня есть собственный заголовок, который имеет TextInput для поиска в StackNavigator. Как я могу получить результат для onChangeText TextInput для определенного класса, вот демо:

const StackNavigator = createStackNavigator({
 TABS: {
    screen: TabNav,
    navigationOptions: ({ navigation }) => {
      return {
        header:
          <View style={{ backgroundColor: '#025281', flexDirection: 
         'row', alignItems: 'center', height: 60 }}>
            <TouchableOpacity
              style={{ paddingLeft: 5 }}>
              <Image source={require(back_arrowimg)} style={{ 
                width: 25, height: 25, resizeMode: 'contain' }}/>
            </TouchableOpacity>
    <TextInput
              style={{ color: 'white', paddingLeft: 15, }}
              type='text'
              placeholder={headerTitle}
              onChangeText={this.loadUsers}
            />
          </View>,
      }
    }   },

  [ConstFile.SCREEN_TITLES.WELCOME_SEARCH]: {
    screen: WELCOMESEARCH,
    navigationOptions: {
      header: null
    }   }, } )

1 Ответ

0 голосов
/ 06 марта 2019

из navigationOption вы не можете ничего сделать на другом экране,

, поэтому вы можете переместить код заголовка в другой файл и использовать его в качестве компонента в TabNav

что-тонапример, скажем, Header.js

<View style={{ backgroundColor: '#025281', flexDirection: 
         'row', alignItems: 'center', height: 60 }}>
    <TouchableOpacity
              style={{ paddingLeft: 5 }}>
          <Image source={require(back_arrowimg)} style={{ 
                width: 25, height: 25, resizeMode: 'contain' }}/>
    </TouchableOpacity>
    <TextInput
              style={{ color: 'white', paddingLeft: 15, }}
              type='text'
              placeholder={headerTitle}
              onChangeText={this.props.loadUsers} // see this change
            />
</View>

и в вашем TabNav.js используйте заголовок в качестве компонента,

<Header 
  loadUsers={(...your params)=>{
    //do your necessary stuffs to display data in this file
  }) />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...