Question

打开模态时，如何将焦点设置到模式中的第一个（或任何给定的）TouchableHighlight组件？我正在使用D-pad /滑板/电视遥控器

让我们使用react-native文档模式示例的片段：

<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）未聚焦，焦点仍然停留在“显示模式”按钮上或者，如何以编程方式将重点放在“按钮2” TouchableHighlight上？

例如，

TextInput具有autoFocus，但是TouchableHighlight没有，如果我们仅在模态中使用Touchable组件，我不知道如何自动关注它们或对其进行隐式设置

最好的问候

Answer 1

将hasTVPreferredFocus: true添加到要聚焦的TouchableHighlight中。

即使文档说明hasTVPreferredFocus仅适用于iOS，该功能仍在Android上实现。

通过编程，您还可以通过调用以下命令来强制聚焦：

yourElementRef.setNativeProps({ hasTVPreferredFocus: true })

Answer 2

@mtkopone。有什么方法可以集中View组件，我在View内有一个列表，并且我想在用户专注于该View时进行一些函数调用（onFocus，onBlur）

打开模式时，如何设置模式中第一个TouchableHighlight组件（或另一个组件，例如由ref给出）的焦点？

2 个答案: