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

Question

Как я могу установить фокус на первый (или любой данный) компонент 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 нет, если мы используем внутри Touch только компоненты Touchable, я не знаю, как их автофокусировать, или неявную настройку.

С уважением

Answer 1

Добавлять hasTVPreferredFocus: true на TouchableHighlight вы хотите сосредоточиться.

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

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

yourElementRef.setNativeProps({ hasTVPreferredFocus: true })

Answer 2

initialRef.current.setNativeProps({hasTVPreferredFocus: true});

Answer 3

@mtkopone . есть ли способ сосредоточитьсяView компонент, у меня есть список, который находится внутри представления, и я хочу выполнять некоторые вызовы функций, когда пользователь фокусируется на этом представлении (onFocus,onBlur)