This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install -g expo-cli |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ expo init | |
? Choose a project name: test-project | |
? Choose a template: expo-template-blank | |
? Yarn v1.12.3 found. Use Yarn to install dependencies? Yes | |
[22:35:26] Extracting project files... | |
[22:35:27] Customizing project... | |
[22:35:27] Initialized a git repository. | |
[22:35:27] Installing dependencies... | |
yarn install v1.12.3 | |
info No lockfile found. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ cd test-project/ | |
$ yarn start | |
yarn run v1.12.3 | |
$ expo start | |
[22:49:43] Starting project at /private/tmp/test-project | |
[22:49:43] Expo DevTools is running at http://localhost:19002 | |
[22:49:43] Opening DevTools in the browser... (press shift-d to disable) | |
[22:49:49] Starting Metro Bundler on port 19006. | |
[22:49:51] Tunnel ready. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { StyleSheet, Text, View } from "react-native"; | |
import { createStackNavigator, createAppContainer } from "react-navigation"; | |
class CitiesScreen extends React.Component { | |
render() { | |
return ( | |
<View style={styles.container}> | |
<Text>Cities Screen</Text> | |
</View> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { Button, StyleSheet, Text, View } from "react-native"; | |
import { createStackNavigator, createAppContainer } from "react-navigation"; | |
class CitiesScreen extends React.Component { | |
render() { | |
return ( | |
<View style={styles.container}> | |
<Text>Cities Screen</Text> | |
<Button |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { Text, View, FlatList } from "react-native"; | |
export default class FlatListDemo extends React.Component { | |
state = { | |
data: [0, 1, 2, 3, 4] | |
}; | |
render() { | |
return ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
render() { | |
return ( | |
<View style={styles.container}> | |
<FlatList | |
data={this.state.data} | |
renderItem={({ item }) => <Text>{`item ${item}`}</Text>} | |
keyExtractor={(item, index) => `key-${index}`} | |
/> | |
</View> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class ListsScreen extends React.Component { | |
state = { | |
data: [0, 1, 2, 3, 4], | |
isRefreshing: false | |
}; | |
refreshData = () => { | |
this.setState({ isRefreshing: true }); | |
const data = this.state.data.map(x => x * 2); | |
this.setState({ data, isRefreshing: false }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { | |
Text, | |
View, | |
FlatList, | |
Dimensions | |
} from "react-native"; | |
const numItems = 10; | |
const { height, width } = Dimensions.get("window"); |
OlderNewer