React Native Syntax Guide
1. React Native Basics
Creating a React Native Component:
import React from 'react';
import { View, Text } from 'react-native';
const MyComponent = () => {
return (
Hello, React Native!
);
};
export default MyComponent;
2. Styling in React Native
Applying Styles:
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 18,
color: 'blue',
},
});
// Usage
Styled Text
3. Handling User Input
Touchable Components:
import { TouchableOpacity, Alert } from 'react-native';
const MyButton = () => {
const handlePress = () => {
Alert.alert('Button Pressed!');
};
return (
Press Me
);
};
4. Navigation in React Native
React Navigation:
// Install React Navigation using:
// npm install @react-navigation/native @react-navigation/stack
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const App = () => {
return (
);
};
5. State Management
State Hook:
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
const Counter = () => {
const [count, setCount] = useState(0);
return (
Count: {count}
);
};
6. React Native Components
Common Components:
import { View, Text, Image, ScrollView } from 'react-native';
const MyComponent = () => {
return (
Hello, React Native!
);
};
Official Documentation and Resources
- React Native Documentation: Official Documentation
- React Navigation Documentation: React Navigation
Explore the official documentation and community resources to delve deeper into React Native and enhance your skills.
0 Comment:
Post a Comment