Как я могу установить фокус на первом компоненте TouchableHighlight (или другом, заданном, например, ref) внутри модального окна при открытии модального окна? - PullRequest
Новая
       13

Как я могу установить фокус на первом компоненте TouchableHighlight (или другом, заданном, например, ref) внутри модального окна при открытии модального окна?

0 голосов
/ 26 октября 2018

Как мне установить фокус на первый (или любой заданный) компонент TouchableHighlight внутри модального окна, когда он открыт? Я пользуюсь D-pad / kayboard / TV Remote

Давайте воспользуемся фрагментом модального примера реактивной документации: 

<View style={{marginTop: 22}}>
  <Modal
    animationType="slide"
    transparent={false}
    visible={this.state.modalVisible}
    onRequestClose={() => {
      Alert.alert('Modal has been closed.');
    }}>
    <View style={{marginTop: 22}}>
       <View>
          <TouchableHighlight>
            <Text>Button 1</Text>
          </TouchableHighlight>
          <TouchableHighlight>
            <Text>Button 2</Text>
          </TouchableHighlight>
          <TouchableHighlight
             onPress={() => {     
           this.setModalVisible(!this.state.modalVisible);
             }}>
             <Text>Hide Modal</Text>
           </TouchableHighlight>
        </View>
     </View>
  </Modal>
  <TouchableHighlight
     onPress={() => {
       this.setModalVisible(true);
     }}>
     <Text>Show Modal</Text>
  </TouchableHighlight>
</View>

Навигация с помощью D-pad работает, но когда модал открыт, первый TouchableHighlight (кнопка 1) не сфокусирован, фокус остается на кнопке «Показать модал» Или как программно установить фокус на TouchableHighlight «Кнопка 2»?

TextInput, например, имеет автофокус, но TouchableHighlight нет, если мы используем только сенсорные компоненты внутри модального, я не знаю, как их автофокусировать, или неявно установить его

С наилучшими пожеланиями

1 Ответ

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

Добавьте hasTVPreferredFocus: true к TouchableHighlight, на который вы хотите сфокусироваться.

Он реализован на Android, хотя в документации указано, что hasTVPreferredFocus предназначен только для iOS.

Программно вы также можете принудительно настроить фокус, вызвав: 

yourElementRef.setNativeProps({ hasTVPreferredFocus: true })
...