View App.js
import React from 'react'; | |
import { | |
StyleSheet, | |
Text, | |
View, | |
ImageBackground, | |
TouchableOpacity, | |
TextInput | |
} from 'react-native'; | |
import Icon from 'react-native-vector-icons/Feather'; |
View Task.js
import React from 'react' | |
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native' | |
import Icon from 'react-native-vector-icons/Feather'; | |
const Task = (props) => ( | |
<View style={styles.taskWrapper}> | |
<Icon | |
name="square" | |
size={30} | |
color="#900" | |
style={{ marginLeft: 15 }} |
View Task.js
import React from 'react' | |
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native' | |
import Icon from 'react-native-vector-icons/Feather'; | |
const Task = (props) => ( | |
<View style={styles.taskWrapper}> | |
<Icon | |
name={props.checked ? "check" : "square"} | |
size={30} | |
color="#900" | |
style={{ marginLeft: 15 }} |
View screens.js
import {Navigation} from 'react-native-navigation'; | |
import Home from '../screens/Home'; | |
import PushedScreen from '../screens/PushedScreen'; | |
import ModalScreen from '../screens/ModalScreen'; | |
export function registerScreens() { | |
Navigation.registerComponent('HomeScreen', () => Home); | |
Navigation.registerComponent('PushedScreen', () => PushedScreen); | |
Navigation.registerComponent('ModalScreen', () => ModalScreen); | |
} |
View index.js
import React from 'react'; | |
import {View, Text, TouchableOpacity} from 'react-native'; | |
import {Navigation} from 'react-native-navigation'; | |
import styles from './styles'; | |
const pushScreen = props => { | |
const {componentId} = props; | |
Navigation.push(componentId, { | |
component: { | |
name: 'PushedScreen', |
View index.js
import React from 'react'; | |
import {View, Text, TouchableOpacity} from 'react-native'; | |
import styles from './styles'; | |
const PushedScreen = props => { | |
return ( | |
<View style={styles.container}> | |
<Text style={styles.headerText}>Pushed Screen</Text> | |
<TouchableOpacity style={styles.backButton}> | |
<Text style={styles.backButtonText}>Go Back</Text> |
View styles.js
import {StyleSheet} from 'react-native'; | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
alignItems: 'center', | |
justifyContent: 'center', | |
backgroundColor: 'skyblue', | |
}, | |
headerText: { |
View index.js
// PushedScreen/index.js | |
import React from 'react'; | |
import {View, Text, TouchableOpacity} from 'react-native'; | |
import {Navigation} from 'react-native-navigation'; | |
import styles from './styles'; | |
const goBack = ({componentId}) => Navigation.pop(componentId); | |
const PushedScreen = props => { | |
return ( | |
<View style={styles.container}> |
View index.js
import React from 'react'; | |
import {View, Text, TouchableOpacity} from 'react-native'; | |
import {Navigation} from 'react-native-navigation'; | |
import styles from './styles'; | |
const pushScreen = props => { | |
const {componentId} = props; | |
Navigation.push(componentId, { | |
component: { | |
name: 'PushedScreen', |
View index.js
// ModalScreen/index.js | |
import React, {Component} from 'react'; | |
import {View, Text, TouchableOpacity} from 'react-native'; | |
import {Navigation} from 'react-native-navigation'; | |
import styles from './styles'; | |
class ModalScreen extends Component { | |
constructor(props) { | |
super(props); | |
Navigation.events().bindComponent(this); |
OlderNewer