React使用相同视图的本机2按钮

Question

我不确定标题是否足以表达我的问题--这是我想问的问题。

目前，我已经创建了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个视图来实现该部分？

Answer 1

做这件事有两种方法。

1. 使用状态 类预订扩展组件{构造函数(支持){超级(支持)；this.state ={ selectedIndex: 0，}；}呈现(){返回( { this.setState({selectedIndex: 0})；}style={宽度: 185，边距:1 }} /> { this.setState({selectedIndex: 1})；})标题=‘历史’颜色=‘白色’背景颜色=‘黑色’style={宽度: 185，边距:1 }} /> {this.state.selectedIndex === 0？}导出默认预订；
2. 使用createMaterialTopTabNavigator