React Native：如何让我的抽屉工作

大佬教程收集整理的这篇文章主要介绍了React Native：如何让我的抽屉工作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React Native：如何让我的抽屉工作？

开发过程中遇到React Native：如何让我的抽屉工作的问题如何解决？下面主要结合日常开发的经验，给出你关于React Native：如何让我的抽屉工作的解决方法建议，希望对你解决React Native：如何让我的抽屉工作有所启发或帮助；

我实现了 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,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',FontWeight: 'bold'
    }

})

解决方法

大佬总结

以上是大佬教程为你收集整理的React Native：如何让我的抽屉工作全部内容，希望文章能够帮你解决React Native：如何让我的抽屉工作所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。