기본 방법과 같이 사용 하면되며 다중파일도 작성 가능하도록 사용했습니다.

# 단일 소스 예시

[code]

[react:ios]

import React, { Component, } from 'react';

import { AppRegistry, Text, } from 'react-native';

const App = () => <Text>Hello World</Text>;

AppRegistry.registerComponent('App', () => App);

[/react]

[/code]

# 다중소스 예시

[code]

[react:ios]

[vendor:redux,Redux,https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js]

[vendor:react-redux,ReactRedux,https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js]

[vendor:redux-persist,redux-persist,https://cdnjs.cloudflare.com/ajax/libs/redux-persist/4.0.0-alpha7/redux-persist.js]

[file:index.js]

import { AppRegistry, View } from 'react-native'

import { createStore } from 'redux'

import { Provider } from 'react-redux'

import { persistStore, autoRehydrate } from 'redux-persist'

// Import the reducer and create a store

import { reducer } from './todoListRedux'

// Add the autoRehydrate middleware to your redux store

const store = createStore(reducer, undefined, autoRehydrate())

// Enable persistence

persistStore(store)

// Import the App container component

import App from './App'

// Pass the store into the Provider

const AppWithStore = () => (

  <Provider store={store}>

    <App />

  </Provider>

)

AppRegistry.registerComponent('App', () => AppWithStore)

[/file]

[file:todoListRedux.js]

// The types of actions that you can dispatch to modify the state of the store

export const types = {

  ADD: 'ADD',

  REMOVE: 'REMOVE',

}

// Helper functions to dispatch actions, optionally with payloads

export const actionCreators = {

  add: (item) => {

    return {type: types.ADD, payload: item}

  },

  remove: (index) => {

    return {type: types.REMOVE, payload: index}

  }

}

// Initial state of the store

const initialState = {

  todos: ['Click to remove', 'Learn React Native', 'Write Code', 'Ship App'],

}

// Function to handle actions and update the state of the store.

// Notes:

// - The reducer must return a new state object. It must never modify

//   the state object. State objects should be treated as immutable.

// - We set \`state\` to our \`initialState\` by default. Redux will

//   call reducer() with no state on startup, and we are expected to

//   return the initial state of the app in this case.

export const reducer = (state = initialState, action) => {

  const {todos} = state

  const {type, payload} = action

  switch (type) {

    case types.ADD: {

      return {

        ...state,

        todos: [payload, ...todos],

      }

    }

    case types.REMOVE: {

      return {

        ...state,

        todos: todos.filter((todo, i) => i !== payload),

      }

    }

  }

  return state

}

[/file]

[file:App.js]

import React, { Component } from 'react'

import { AppRegistry, View } from 'react-native'

import { connect } from 'react-redux'

import { actionCreators } from './todoListRedux'

import List from './List'

import Input from './Input'

import Title from './Title'

const mapStateToProps = (state) => ({

  todos: state.todos,

})

class App extends Component {

  onAddTodo = (text) => {

    const {dispatch} = this.props

    dispatch(actionCreators.add(text))

  }

  onRemoveTodo = (index) => {

    const {dispatch} = this.props

    dispatch(actionCreators.remove(index))

  }

  render() {

    const {todos} = this.props

    return (

      <View>

        <Title>

          To-Do List

        </Title>

        <Input

          placeholder={'Type a todo, then hit enter!'}

          onSubmitEditing={this.onAddTodo}

        />

        <List

          list={todos}

          onPressItem={this.onRemoveTodo}

        />

      </View>

    )

  }

}

export default connect(mapStateToProps)(App)

[/file]

[file:List.js]

import React, { Component } from 'react'

import { AppRegistry, View, TouchableOpacity, Text, StyleSheet } from 'react-native'

export default class List extends Component {

  renderItem = (text, i) => {

    const {onPressItem} = this.props

    return (

      <TouchableOpacity

        style={styles.item}

        onPress={() => onPressItem(i)}

      >

        <Text>{text}</Text>

      </TouchableOpacity>

    )

  }

  render() {

    const {list} = this.props

    return (

      <View>

        {list.map(this.renderItem)}

      </View>

    )

  }

}

const styles = StyleSheet.create({

  item: {

    backgroundColor: 'whitesmoke',

    marginBottom: 5,

    padding: 15,

  },

})

[/file]

[file:Input.js]

import React, { Component } from 'react'

import { AppRegistry, TextInput, StyleSheet } from 'react-native'

export default class Input extends Component {

  state = {

    text: '',

  }

  onChangeText = (text) => this.setState({text})

  onSubmitEditing = () => {

    const {onSubmitEditing} = this.props

    const {text} = this.state

    if (!text) return // Don't submit if empty

    onSubmitEditing(text)

    this.setState({text: ''})

  }

  render() {

    const {onSubmitEditing, placeholder} = this.props

    const {text} = this.state

    return (

      <TextInput

        style={styles.input}

        value={text}

        placeholder={placeholder}

        onChangeText={this.onChangeText}

        onSubmitEditing={this.onSubmitEditing}

      />

    )

  }

}

const styles = StyleSheet.create({

  input: {

    padding: 15,

    height: 50,

  },

})

[/file]

[file:Title.js]

import React, { Component } from 'react'

import { View, Text, StyleSheet } from 'react-native'

export default class Title extends Component {

  render() {

    const {children} = this.props

    return (

      <View style={styles.header}>

        <Text style={styles.title}>{children}</Text>

      </View>

    )

  }

}

const styles = StyleSheet.create({

  header: {

    backgroundColor: 'skyblue',

    padding: 15,

  },

  title: {

    textAlign: 'center',

    color: 'white',

  },

})

[/file]

[/react]

[/code]