React Native：我怎样才能让我的抽屉工作

Question

我实现了 Drawer 代码并从其原始文档中安装了 Drawer 并将 Drawer 添加到我的项目中，但我看不到抽屉，尝试使用 flex 但徒劳无功

这是我的代码，非常感谢任何帮助

谢谢

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View >
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  const [selectedValue, setSelectedValue] = useState(' ');
  const [text, setText] = useState('');
  const [data, setData] = useState(['']);
  const [totalAmount, setTotalAmount] = useState(0)

  return (
    
    <TouchableWithoutFeedback onPress={() => {
      Keyboard.dismiss();
    }}>

     
          <View style={styles.container}>
            <View >
         
              <Header />

              <View style={styles.row}>
                <TextInput style={styles.input}
                  underlineColorAndroid="transparent"
                  placeholder="   Amount "
                  placeholderTextColor="#9a73ef"
                  autoCapitalize="none"
                  keyboardType='numeric'
                  onChangeText={text => setText(text)}
                  value={text}
                />
   <Picker
                  selectedValue={selectedValue}
                  style={{ height: 50, width: 150 }}
                  onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
                >

                  <Picker.Item value= " " label='Select Option' />
                  <Picker.Item label="Food" value="Food" />
                  <Picker.Item label="Transport" value="Transport" />
                  <Picker.Item label="Rent" value="Rent" />
                  <Picker.Item label="Other" value="Other " />

                </Picker>
              </View>

我把我的抽屉放在这里

 <Text>TOTAL : {totalAmount}</Text>
          <NavigationContainer>
            <Drawer.Navigator initialRouteName="Home">
              <Drawer.Screen name="Home" component={HomeScreen} />
              <Drawer.Screen name="Notifications" component={NotificationsScreen} />
            </Drawer.Navigator>
          </NavigationContainer>
              <Button
                title="Save"
                color="#841584"
                accessibilityLabel="Learn more about this purple button"
                onPress={() => {        
                 
                  if (text == 0 ) {
                    alert('Please enter the Amount ')     
                       }            
                
                  if (text && selectedValue != " "){
                  setData([...data, { name: text, selectedValue: selectedValue }

                    ])
                  
                   setTotalAmount(totalAmount + parseInt(text))
                 
                }}
                }
                 
                  
                
                 />
          
          <View styles={styles.list}>
                <FlatList
                data={data}
                        
              renderItem={({ item }) => <React.Fragment>
                <Text style={styles.item}> {item.name}$ Spend on "
                    {item.selectedValue}"</Text>

              </React.Fragment>}

              keyExtractor={(item, index) => index.toString()}

            />
</View>
            </View>
          </View>
        

       
</TouchableWithoutFeedback>
)};

这是我项目的样式

const styles = StyleSheet.create({
  container: {
   flex: 1,
   backgroundColor: '#fff',
  },
  input: {
    margin: 15,
    height: 40,
    borderColor: 'black',
    borderWidth: 2,
    width: 80,
    flex: 1,
  },
  input2: {
    margin: 15,
    height: 40,
    borderColor: 'black',
    borderWidth: 2,
    width: 80,
   flex: 1,
  },

  row: {
    flexDirection: 'row'
  },

  item: {
    textAlign: 'center',
    marginTop: 20,
    padding: 20,
    fontSize: 20,
    backgroundColor: 'steelblue'
  },
  list: {
    marginTop: 20,
    flex: 1
  },
  button: {

  }


});

还有，我有头文件

export default function Header() {
    return (

        <View style={styles.header}>
            <Text style={styles.title}>Мои расходы   </Text>

            <NavigationContainer>

                <Stack.Navigator initialRouteName="Home">
                    <Stack.Screen name="Home" component={HomeScreen} />
                    <Stack.Screen name="Details" component={DetailsScreen} />
                </Stack.Navigator>
            </NavigationContainer>
        </View>
        
    );

}


const styles = StyleSheet.create({
    header: {
        height: 80,
        paddingTop: 38,
        backgroundColor: 'red'
    },

    title: {
        textAlign: 'center',
        color: '#fff',
        fontSize: 20,
        fontWeight: 'bold'
    }

})

Answer 1

从左向右滑动，只需检查您的抽屉是否出来了。如果不是，那么您的抽屉没有按照文档中的说明进行设置。在您的标题和 onPress 方法上创建一个按钮，只需调用 {() => this.props.navigation.openDrawer()}