ソフトキーボードの外で接触反応を得ることができない

Question

Textコンポーネントは他の状況でもうまく機能しますが、このページでは不思議です。ソフトキーボードの外で接触反応を得ることができません。 ？レンダリング方法：

<View style={styles.root}> 
       <TouchableOpacity activeOpacity={1} onPress={() => { 
       }}> 
        <Image source={exploreIcon} style={{ 
         width: 88, 
         height: 88, 
         marginTop: 40, 
         marginBottom: 40, 
         alignSelf: 'center', 
         resizeMode: 'contain' 
        }}/> 
       </TouchableOpacity> 
       <TouchableOpacity style={styles.linkSection} onPress={() => { 
        this.props.navigator.push({ 
         name: 'hotlink' 
        }); 
       }}> 
        <View style={styles.linkAddress}> 
         <Image source={copyLinkIcon} style={styles.copyLinkImage}/> 
         <Text style={styles.linkAddressHint}>{strings.linkAddressHint}</Text> 
        </View> 
        <View style={styles.linkPlayBtn}> 
         <Text style={styles.playBtnHint}> 
          {strings.playBtnHint} 
         </Text> 
        </View> 
       </TouchableOpacity> 

       <View style={styles.favorite}> 
        <Text style={styles.favoriteText}>{strings.myFavorite}</Text> 
        <FlatList 
         style={{ 
          marginTop: 10, 
          alignSelf: 'stretch', 
          paddingLeft: this.itemPadding, 
          paddingRight: this.itemPadding 
         }} 
         data={this.state.customLinkArray} 
         renderItem={this._renderItem} 
         onRefresh={this._onRefresh} 
         numColumns={4} 
         horizontal={false} 
         keyExtractor={(item, index) => { 
          return String(index); 
         }} 
        /> 
       </View> 

       <PopupDialog 
        ref={(addLinkDialog) => { 
         this.addLinkDialog = addLinkDialog; 
        }} 
        dialogTitle={<DialogTitle title={strings.addMoreLink}/>} 
        width={0.8} 
        height={0.4} 
        dialogStyle={{marginTop: -100}} 
        dialogAnimation={scaleAnimation} 
        onDismissed={() => { 
         this._resetCurrentLinkItem(); 
        }}> 
        <View style={styles.dialogContentView}> 
         <TextInput 
          ref={(o) => { 
           this.linkTitleTextInput = o; 
          }} 
          style={{flex: 1}} 
          autoCapitalize='none' 
          placeholder={strings.addLinkTitleHint} 
          keyboardType='default' 
          enablesReturnKeyAutomatically={true} 
          autoCorrect={false} 
          onChangeText={(text) => { 
           this.state.currentLinkItem.webTitle = text; 
           this.setState({ 
            currentLinkItem: this.state.currentLinkItem, 
           }); 
          }} 
          value={title} 
         /> 
         <View style={{backgroundColor: 'black', height: 0.5}}/> 
         <TextInput 
          ref={(o) => { 
           this.linkAddressTextInput = o; 
          }} 
          style={{flex: 1, marginTop: 17}} 
          autoCapitalize='none' 
          placeholder={strings.addLinkAddressHint} 
          keyboardType='url' 
          enablesReturnKeyAutomatically={true} 
          autoCorrect={false} 
          onChangeText={(text) => { 
           this.state.currentLinkItem.webUrl = text; 
           this.setState({ 
            currentLinkItem: this.state.currentLinkItem, 
           }); 
          }} 
          value={this.state.currentLinkItem.webUrl} 
         /> 
         <View style={{backgroundColor: 'black', height: 0.5}}/> 
         <View style={{marginTop: 17, flexDirection: 'row'}}> 
          <TouchableOpacity style={{ 
           flex: 1, height: 33, 
           borderColor: '#4d515a', 
           borderWidth: 1, 
           borderRadius: 17, 
           margin: 17, 
           justifyContent: 'center', 
           backgroundColor: '#fff', 
           padding: 5 
          }} onPress={() => { 
           this.addLinkDialog.dismiss(); 
           this._resetCurrentLinkItem(); 
          }}> 
           <Text style={{textAlign: 'center'}}>{strings.cancel}</Text> 
          </TouchableOpacity> 
          <TouchableOpacity style={{ 
           flex: 1, height: 33, 
           borderColor: '#4d515a', 
           borderWidth: 1, 
           borderRadius: 17, 
           margin: 17, 
           justifyContent: 'center', 
           backgroundColor: '#4d515a', 
           padding: 5 
          }} onPress={() => { 
           this._addCustomLink(); 
          }}> 
           <Text style={{textAlign: 'center', color: '#fff'}}>{strings.confirm}</Text> 
          </TouchableOpacity> 
         </View> 
        </View> 
       </PopupDialog> 

       <ActionSheet 
        ref={(o) => this.ActionSheet = o} 
        options={this.BUTTONS} 
        destructiveButtonIndex={1} 
        cancelButtonIndex={2} 
        onPress={this._handleLinkOptions} 
       /> 

      </View> 

Answer 1

TouchableWithoutFeedbackを使用してみてください。 TouchableWithoutFeedbackは1つの子しか受け入れないため、Viewにすべての子コンポーネントをラップする必要があります。