[英]React-Native 2 button using the same view
我不確定標題是否足以表達我的問題,這就是我要問的問題。
目前,我已經創建了2個按鈕和一個與此圖像類似的視圖(2個按鈕1個視圖):
我想做的是,當我單擊“
Upcoming
按鈕時,它將在視圖中顯示一些文本(*說顯示“ 123”)。 “History
按鈕也是如此,當我單擊“History
按鈕時,它將在該視圖中顯示一些文本(*在此文本中放置“ qwe”)。
這是我的代碼:
class Booking extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Booking',
headerTintColor: 'white',
headerBackTitle: 'Back',
headerStyle: { backgroundColor: 'black' },
headerRight: (
<Button
onPress={() => {
navigation.navigate('Bnew');
}}
title='New'
color='white'
backgroundColor='black'
/>
),
};
};
render() {
return (
<View style={styles.container}>
<View style={styles.boohis}>
<Button
onPress={() => {
Alert.alert("", "Upcoming is Coming Soon!");
}}
title='Upcoming'
color='white'
backgroundColor='black'
style={{ width: 185, margin: 1 }}
/>
<Button
onPress={() => {
Alert.alert("", "History is Coming Soon!");
}}
title='History'
color='white'
backgroundColor='black'
style={{ width: 185, margin: 1 }}
/>
</View>
<View style={styles.container2}>
</View>
</View>
)
}
}
export default Booking;
const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollViewContainer: {
flexGrow: 1,
},
boohis: {
flexDirection: 'row',
justifyContent: 'space-around'
},
container2: {
flexGrow: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'space-between',
borderColor: 'black',
borderWidth: 2,
margin: 1
},
})
如何通過使用2個按鈕使用的1個視圖來實現該部分?
有兩種方法可以做到這一點。
使用狀態
class Booking extends Component { constructor(props) { super(props); this.state = { selectedIndex: 0, }; } render() { return ( <View style={styles.container}> <View style={styles.boohis}> <Button onPress={() => { this.setState({selectedIndex: 0}); }} title='Upcoming' color='white' backgroundColor='black' style={{ width: 185, margin: 1 }} /> <Button onPress={() => { this.setState({selectedIndex: 1}); }} title='History' color='white' backgroundColor='black' style={{ width: 185, margin: 1 }} /> </View> {this.state.selectedIndex === 0 ? <View style={styles.container2}> <Text>Page 1</Text> </View> : <View style={styles.container2}> <Text>Page 2</Text> </View> } </View> ) } } } export default Booking;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.