У меня есть представление React-Native, где я должен располагать кнопки рядом друг с другом.
Что происходит, когда я нажимаю Назад , он делает то, что должен делать: console.log(-1)
Однако, когда я нажимаю Далее , console.log «Назад» активируется почти в 70% случаев, и только в 30% случаев он показывает console.log(+1)
. Я понятия не имею, почему это происходит.Вот скриншот того, что отображается.Левая сторона - это то, что вы видите из кода ниже, а правая сторона - это то, что вы видите, если я добавлю красную рамку к styles.footerButtonContainer.
footerButtonContainer: {
flex: 1,
flexWrap: 'wrap',
alignItems: 'flex-start',
justifyContent: 'center',
flexDirection:'row',
borderWidth:1,
borderColor:"red"
},
Что еще более странно, если я добавлю эту границу, то вышеупомянутая проблема полностью исчезнет, и кнопки будут работать так, как они должны.
Код
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: "#ecf0f1",
paddingBottom:30
},
footer: {
position: 'absolute',
left: 0,
bottom: 0,
width:"100%",
height:55,
backgroundColor:"#fff",
},
footerButtonContainer: {
flex: 1,
flexWrap: 'wrap',
alignItems: 'flex-start',
justifyContent: 'center',
flexDirection:'row',
},
footerItem: {
flex:1,
flexWrap: 'wrap',
alignItems: 'center',
justifyContent: 'center',
flexDirection:'row',
borderWidth:1,
borderColor:"#F1F0F4",
height:55,
width:"100%"
},
footerIcon: { marginTop:-5 },
footerText: { marginTop:-5, textAlign:"center", fontSize:24, fontWeight:"400", color:"#6B6D77", borderWidth:0, borderColor:"red" }
});
render() {
return (
<View style={{ height:"100%" }}>
<ScrollView ref="scrollWindow" style={{ paddingTop:"5%", marginBottom:56}}>
<View style={styles.container}>
</View>
</ScrollView>
<View style={styles.footer}>
<View style={{height:5, backgroundColor:"#E8E8EA", width: "25%"}} />
<View style={styles.footerButtonContainer}>
<TouchableHighlight underlayColor='#fff' style={styles.footerButtonContainer} onPress={() => {
console.log("-1");
} }>
<View style={styles.footerItem}>
<Icon containerStyle={styles.footerIcon} name="chevron-left" color="#000" type="solid" size={24} />
<Text style={[styles.footerText, {marginLeft: 10}]}>Back</Text>
</View>
</TouchableHighlight>
<TouchableHighlight underlayColor='#fff' style={styles.footerButtonContainer} onPress={() => {
console.log("+1");
}}>
<View style={styles.footerItem}>
<Text style={[styles.footerText, {marginRight: 10, color:"#000"}]}>Next</Text>
<Icon containerStyle={styles.footerIcon} name="chevron-right" color="#000" type="solid" size={24} />
</View>
</TouchableHighlight>
</View>
</View>
</View>
);
}