Question

当我使用TouchableOpacity时，我的代码可以正常工作，但是当我使用TouchableWithoutFeedback时，我的代码将引发错误。因为我不想让点击效果模糊，所以我想改用TouchableWithoutFeedback。

return (
    <View  style={{ ...props.style}}>
        <TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
             <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
             <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
         </TouchableWithoutFeedback>

         <View style={styles.parentHr}/>
         {
             toggle.expanded &&
             <View style={styles.child}>
                 {props.data}  
             </View>
         }
    </View>
)

Answer 1

TouchableWithoutFeedback上的documentation说：

TouchableWithoutFeedback仅支持一个孩子。如果您希望有几个子组件，请将它们包装在View中。

实际上，TouchableOpacity确实支持多个子级（因此，使用该组件时代码为何起作用），TouchableWithoutFeedback不支持。但是，您给TouchableWithoutFeedback多个子组件（Text和Icon）是无效的。解决方案应该是将文本和图标简单地包装在View组件中，或者，如果不想使用视图，则将React.Fragment包裹起来：

<TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
    <React.Fragment>
        <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
        <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
    </React.Fragment>
</TouchableWithoutFeedback>

Answer 2

如果您不想在单击/触摸时显示模糊效果。您只需将 org.w3c.dom 设置为 print('Please enter your Employee information in the below prompts') def enterEmployee(): name = str(input('Name: ')) SSN = str(input('SSN: ')) phone = str(input('Phone: ')) email = str(input('Email: ')) salary = str(input('Salary: ')) employee = [name, SSN, phone, email, salary] print(' '.join(employee)) return employee all_e_lists = [ ] for _ in range(5): all_e_lists.append(enterEmployee()) # Next user request info print("You can pull an individual's list by entering 1 - 5") query_emp_list = int(input('Choose 1 - 5: ')) - 1 if 0 <= query_emp_list < len(all_e_lists): print(' '.join(all_e_lists[query_emp_list])) 标签

activeOpacity={1}

Answer 3

您不能在Touchables中使用两个或多个元素。要解决您的问题，您必须使用<View></View>或<React.Fragment></React.Fragment>包装元素像这样：

   <TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
        <View>
              <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
              <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
        </View>
   </TouchableWithoutFeedback>

或


   <TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
        <React.Fragment>
              <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
              <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
        </React.Fragment>
   </TouchableWithoutFeedback>

不变违规：不变违规：React.Children。仅预期接收单个React元素的子元素

3 个答案: