У меня есть Touchablehighlight, который мне нужен, чтобы установить абсолютное значение, но после этого он становится незаметным.
Что может быть причиной этого? Он работает так, как должен, если у меня нет позиции, установленной как абсолютная.
У меня есть Touchablehighlight, который мне нужен, чтобы установить абсолютное значение, но после этого он становится незаметным.
Что может быть причиной этого? Он работает так, как должен, если у меня нет позиции, установленной как абсолютная.
Решение заключалось в изменении порядка компонентов.
Что я изначально имел:
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
<View> .... </View>
Это было исправление:
<View>...</View>
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
Чувак, просто иди и добавь zIndex: 1 к представлению, содержащему кнопки и бум, которые ты сделал в большинстве случаев. Также обратите внимание, что добавление высоты добавляет тень к кнопке Android, и иногда повышение также может быть проблемой, если ее добавить к родительскому элементу и не добавить к дочернему элементу, тогда дочерняя кнопка может не работать. (Редкий случай)
например:
buttonContainers:
{
zIndex: 1,
alignSelf: 'flex-end',
position: 'absolute',
top:5,
right: 5,
height: 40,
borderWidth: 1,
justifyContent: 'center',
alignContent: 'center',
width: 80
},
Попробовав все в течение двух часов, я нашел решение изменить положение моей кнопки.
До...
export default class Navbar extends Component {
componentDidMount() {
console.log(this.props);
}
render() {
return (
<View style={styles.content}>
<TouchableOpacity
onPress={this.props.openModal}
style={styles.containerButton}
>
<Text>New</Text>
</TouchableOpacity>
<Text style={styles.textCenter}>Remember me</Text>
</View>
);
}
}
const styles = StyleSheet.create({
content: {
paddingTop: 30,
paddingBottom: 10,
backgroundColor: '#81C04D',
flexDirection: 'row'
},
containerButton: {
position: 'absolute',
top: 30,
left: 8
},
textCenter: {
flex: 1,
textAlign: 'center',
fontWeight: 'bold'
}
});
После...
export default class Navbar extends Component {
componentDidMount() {
console.log(this.props);
}
render() {
return (
<View style={styles.content}>
<Text style={styles.textCenter}>Remember me</Text>
<TouchableOpacity
onPress={this.props.openModal}
style={styles.containerButton}
>
<Text>New</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
content: {
paddingTop: 30,
paddingBottom: 10,
backgroundColor: '#81C04D',
flexDirection: 'row'
},
containerButton: {
position: 'absolute',
top: 30,
left: 8
},
textCenter: {
flex: 1,
textAlign: 'center',
fontWeight: 'bold'
}
});
Это работает !!!
Я использовал TouchableOpacity
внутри абсолютного обзора. Функция onPress
не была вызвана после нажатия. Но непрозрачность изменилась. Я испробовал все вышеперечисленные решения, но ни одно из них не работает.
Мои решения - использовать onPressIn
вместо onPress
.
Кажется, что внутреннее действие Touchable*
странно в ReactNative, когда оно в абсолютном представлении.
используйте onPressIn вместо onPress
Это сделало область кликабельной!