REACT NATIVE：如何为整个屏幕制作抽屉答案

【问题标题】：REACT NATIVE: How to make Drawer for whole screenREACT NATIVE：如何为整个屏幕制作抽屉
【发布时间】：2021-01-22 10:30:45
【问题描述】：

我的抽屉有问题，我怎样才能把抽屉放在我的其他视图中，它只是在标题 - 视图中，我想像普通程序一样为所有屏幕制作它：这是我的 App.js，这里是一切从逻辑和设计开始的地方

谢谢！

 
    <TouchableWithoutFeedback onPress={() => {
      Keyboard.dismiss();
    }}>     
          <View style={styles.container}>
            <View >
         
          <Header /> //Header.js

              <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>
         
              <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>
)};

这是我的 StyleSheet.style //CSS

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
  },
});

最后这是我的 Header.js


function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button
                onPress={() => navigation.navigate('Notifications')}
                title="Go to notifications"
            />
        </View>
    );
}

function NotificationsScreen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button onPress={() => navigation.goBack()} title="Go back home" />
        </View>
    );
}

const Drawer = createDrawerNavigator();

export default function Header() {
    return (

        <View style={styles.header}>
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="Home">
                    <Drawer.Screen name="Home" component={HomeScreen} />
                    <Drawer.Screen name="Notifications" component={NotificationsScreen} />
                </Drawer.Navigator>
            </NavigationContainer>

            <Text style={styles.title}>My expenses   </Text>


        </View>
        
    );

}


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

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

})

【问题讨论】：

我的意思是，你自己把它放在Header 中，那它怎么可能无处不在？您是否有一个 App 组件，该容器包含您的所有其他组件？
是的，我的 App.js 在那边，我插入到 header.js，因为在我的 Aapp.js 中我看不到，可以帮助我，我的意思是如何制作我的整个屏幕的抽屉不仅用于标题？
你解决了吗？
不，因为如果我把抽屉放到另一个地方，我看不到它（，我不知道我可能有太多视图

标签： javascript android react-native react-redux

【解决方案1】：

这将是一个笼统的答案，我觉得我缺少一些细节，但让我们尝试一下。所以基本上你的抽屉应该包装你的整个应用程序。为什么？因为您不关心在应用程序中导航的位置，所以抽屉是所有导航的父视图。它就在那里，始终存在于整个应用程序中。

因此，它看起来像这样。

App.js

<Drawer
  content={<LateralContainer />} // this for me is the drawer that I actually display to the user
  open={props.lateralOpen && ...} // define when it is open
  disabled={!props.userId} // define when it is disabled
  ...
>
  <View style={styles.container}>
    <StatusBar />
    <HeaderContainer
      ...
    />
    <AppNavigatorContainer
      ...
     />
       ...
  </View>
</Drawer>

所以Drawer 封装了所有内容，而不仅仅是您拥有的任何内容的标题。希望这会有所帮助，如果没有，让我们继续调试。

【讨论】：