Я пытаюсь сделать видимым список кнопок поверх многострочного ввода текста, который теперь работает. Но когда я нажимаю на одну из этих кнопок, ничего не происходит.
Я использую zIndex, чтобы вывести дочерний компонент поверх TextInput, теперь, когда я нажимаю на эту кнопку, TextInput получает фокус вместо нажатия кнопки событие.
Я только начал изучать react-native, поэтому не могу понять, где мне нужно внести изменения, чтобы сделать его работоспособным.
Пример структуры кода приведен ниже: *
const Component_1=()=>{
const UpdateTextInput=(ip,callType)=>{
console.log(ip);
}
return (<View keyboardShouldPersistTaps={'handle'}>
<View style={{flexDirection:'row',backgroundColor:'#fff',zIndex:10}}>
<ChildComponent callBackFunc={(ip,callType)=>UpdateTextInput(ip,callType)} />
</View>
<View>
<TextInput
multiline
onChangeText={(text)=>updateString(text,'')}
/>
</View>
</View>
)
}
export default Component_1;
const ChildComponent=({callBackFunc})=>{
const [ButtonSection,SetButtonSection]=useState(false)
return (
<View style={{flexDirection:'row-reverse'}}>
<View style={{flexDirection:'column',width:'15%',position:'absolute'}} >
<TouchableOpacity onPress={()=>SetButtonSection(!ButtonSection)} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='arrow-drop-down'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:20,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
{ButtonSection==true
?<View style={{flexDirection:'column',position:'relative',backgroundColor:'#ccc'}}>
<TouchableOpacity onPress={()=>callBackFunc('','CLR')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='block'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','COPY')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='content-copy'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','SAVE')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='save'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<Button title='BTN' onPress={()=>console.log('Button1')
}/>
</View>
:null
}
</View>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} keyboardShouldPersistTaps={'handle'} style={{marginRight:50}}>
<Item/>
</ScrollView>
</View>
)
}
export default ChildComponent
Я пробую это