[英]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.