React Native

Desarrollando apps nativas para iOS y Android con JavaScript y React.js

Cristian Yáñez

Desarrollador

github.com/ycanales

React Native nos permite construir aplicaciones nativas para iOS y Android usando JavaScript y React.js

En Mac se puede construir para iOS y Android mientras que en Windows y Linux sólo Android

Soporte

- Xcode

- Homebrew

- NPM

Requerimientos (Mac)

brew install node
brew install --HEAD watchman

npm install -g react-native-cli

Crear proyecto

$ react-native init LaApp
$ cd LaApp
$ open ios/LaApp.xcodeproj

LiveReload y HotReload

Estructura archivos

.
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── keystores
│   └── settings.gradle
├── index.android.js
├── index.ios.js
├── ios
│   ├── LaApp
│   ├── LaApp.xcodeproj
│   ├── LaAppTests
│   └── build
├── node_modules
│   ├── react
│   └── react-native
└── package.json

archivos compilación Android

archivos compilación iOS

entrada de nuestro proyecto

Estructura archivos

https://github.com/eggheadio/react-native-gh-notetaker

.
├── App
│   ├── Components
│   │   ├── Badge.js
│   │   ├── Dashboard.js
│   │   ├── Helpers
│   │   ├── Main.js
│   │   ├── Notes.js
│   │   ├── Profile.js
│   │   └── Repositories.js
│   └── Utils
│       └── api.js
├── README.md
├── iOS
├── index.ios.js
├── notetaker.xcodeproj
└── package.json

Componentes

render() {
    return (
      <View style={styles.mainContainer}>
        <Text style={styles.title}>
          Search for a Github User
        </Text>
        <TextInput
          style={styles.searchInput}
          value={this.state.username}
          onChange={this.handleChange.bind(this)} />
        <TouchableHighlight
          style={styles.button}
          onPress={this.handleSubmit.bind(this)}
          underlayColor="white">
            <Text style={styles.buttonText}>SEARCH</Text>
        </TouchableHighlight>
        <ActivityIndicatorIOS
          animating={this.state.isLoading}
          color="#111"
          size="large">
        </ActivityIndicatorIOS>
        {showErr}
      </View>
    );
  }

Estilos

var styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    padding: 30,
    marginTop: 65,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#48BBEC'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center',
    color: '#fff'
  },
  searchInput: {
    height: 50,
    padding: 4,
    marginRight: 5,
    fontSize: 23,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 8,
    color: 'white'
  },

  buttonText: {
    fontSize: 18,
    color: '#111',
    alignSelf: 'center'
  },
  button: {
    height: 45,
    flexDirection: 'row',
    backgroundColor: 'white',
    borderColor: 'white',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    marginTop: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
});