react-native - 反应原生按钮 onpress 显示 2 个新按钮并使其他内容不可点击

Question

我想在按下 FloatingButton 后，再显示 2 个按钮。虽然我显示了这 2 个按钮，但我想让此页面的其余部分无法点击，用户必须按下其中一个按钮才能继续导航。这是我的代码：

import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import FloatingButton from '../components/FloatingButton';

    const DuellScreen = () => {
    
        return (
        <View style={{ flex: 1 }}>
            <ScrollView style={styles.container2}>
                <Text style={{ flex: 1 }}>body</Text>
             </ScrollView>
            <View style={styles.container}>
                 <FloatingButton/>
            </View>
         </View>
        )
    }
    
    const styles = StyleSheet.create({
        container: {
            padding: 16,
            flex: 1,
            backgroundColor: '#fff',
            justifyContent: 'flex-end',
            alignItems: 'center'
        },
        container2: {
            padding: 16,
            flex: 5,
            backgroundColor: '#fff',
        },
    });
    
    
    export default DuellScreen

我该怎么做，尤其是在 buttonpress + 后可见的 2 按钮使其他东西无法点击？

标签： react-nativereact-native-androidreact-native-ios

Answer 1

这个怎么样：

import React, { useState } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import FloatingButton from '../components/FloatingButton';

const DuellScreen = (props) => {

    const [active, setActive] = useState(true);
    
    return (
        <View style={{ flex: 1 }}>
            <ScrollView style={styles.container2}>
                <Text style={{ flex: 1 }}>body</Text>
            </ScrollView>
            <View style={styles.container}>
                <FloatingButton onPress={active ? () => setActive(false) : () => {} } />

                {!active ? 
                    <View>
                        <FloatingButton onPress={() => props.navigation.navigate('OtherScreen')} />
                        <FloatingButton onPress={() => props.navigation.navigate('AnotherScreen')} />
                    </View>    
                : null}
            </View>
        </View>
    )
}