Передать значение TextInput импортированному компоненту - PullRequest
Новая
       27

Передать значение TextInput импортированному компоненту

0 голосов
/ 28 января 2019

Я занимаюсь разработкой мобильного приложения на реагирующем языке.я новичок, чтобы реагировать на родной, поэтому я застрял на 1 балл.

Проблема в том, что у меня есть файл навигации, в котором навигатор стека обернут в навигатор по вкладкам.

У меня есть пользовательский заголовок с кнопкой открытия меню ящика и строкой поиска.

iиметь отдельный компонент для просмотра поиска.который показывает и прячется на моей домашней странице на основе фокусировки на панели поиска.

Теперь вопрос в том, что на моей домашней странице, когда я щелкаю панель поиска, там отображается компонент поиска, и мне нужно получить значение этой панели поиска в моем компоненте поиска.

Может быть, это немного сбивает с толку, пожалуйста, не стесняйтесь спрашивать меня что-нибудь.

Я собираюсь атаковать изображения и мой код.

моя навигация jsвыглядит следующим образом. 

import Search from '../Search/search';

StackNavigator 

const SearchBarI = (props) => {
return (
    (<View style={searchSection}>
        <TextInput style={searchBarInput} placeholder="Search" ref={input => { this.searchInput = input }}
            onChangeText={(text) => this.onChangeText(text)} />
        <Icon style={searchIcon} name="ios-search" size={20} color="#000" />
        <TouchableOpacity style={closeIconBtn} onPress={() => ClearText()}>
            <Icon style={closeIcon} name="ios-close" size={20} color="#000" />
        </TouchableOpacity>

    </View>)
)
}
const feedStackNavigation = createStackNavigator({
feed: {
    screen: Feed,
    navigationOptions: ({ navigation }) => {
        const { params = {} } = navigation.state;
        return {

            headerTitle: <SearchBarI/>,
            headerStyle: headerStyle,
            headerRight: (
                <TouchableOpacity style={{ paddingRight: 10 }} onPress={(params.ClearSearch)}>
                    <Text style={{ color: '#fff' }}>Cancel</Text>
                </TouchableOpacity>
            ),

            headerLeft: <HeaderLeft navigation={navigation} />,


        }
    }
},
})

And include in tab navigator and export it.

const appTabNavigation = createBottomTabNavigator({
Feed: feedStackNavigation,
})


export default appTabNavigation;

что мне нужно, когда onChangeText вмоя строка поиска Я хочу передать это значение в свой компонент поиска и должен изменить там состояние и другие функции.

Скриншот домашней страницы.

enter image description here

После нажатия на скриншот панели поиска.

enter image description here

посленабрав в строке поиска, я получил предупреждение, которое является функцией внутри файла навигации.

enter image description here

Надеюсь, это даст вам четкий вид.Заранее спасибо.

1 Ответ

0 голосов
/ 28 января 2019

Я не знаю, сработает ли это, но я использовал какой-то подход к этому раньше, мне нужно было взаимодействие между двумя компонентами на одной странице, и это был кошмар.Теперь я не использую заголовок реагирующей навигации, потому что у меня есть пользовательский заголовок 7u7.Но вы можете попробовать это.

Сначала.Не определяйте headerTitle в навигационных параметрах стека.Вместо этого определите его на экране Feed.

Так, например, в ваш канал экрана необходимо добавить статические навигационные параметры, а также отправить обратный вызов в качестве реквизита заголовку заголовка 

export default class App extends React.Component {
  constructor() {....}


  static navigationOptions = { //here is the navoptions
  headerTitle: <SearchBarI callback={this.handlecallback}/>  //here is the callback that we are sending
  };   


  handlecallback =(props)=>{ //here is the handler , it NEEDS to be a fat arrow function [that's how mafia works]
      alert(props)
       //do whatever you want in that page
  }

  render() {
    return (

      <View>
      </View>

    );
  }
}

и в строке поиска введите 

<TextInput style={searchBarInput} placeholder="Search" ref={input => { this.searchInput = input }}
            onChangeText={(text) => props.callback(text)} />
...