멀티플 파일 지원-리액트 네이티브 웹 플레이어

여기

{
    "tab": {
        "backgroundColor":"rgb(250,250,250)"
    },
    "header": {
        "backgroundColor":"rgb(250,250,250)",
        "boxShadow":"rgba(0, 0, 0, 0.2) 0px 1px 1px",
        "zIndex":10
    },
    "headerText": {
        "color":"#AAA",
        "fontWeight":"normal"
    },
    "transpilerHeader": {
        "backgroundColor":"rgb(240,240,240)",
        "boxShadow": "rgba(0, 0, 0, 0.2) 0px 1px 1px",
        "zIndex":10
    },
    "transpilerHeaderText": {
        "color":"#888",
        "fontWeight":"normal"
    },
    "tabText": {
        "color":"#AAA"
    },
    "tabTextActive":{
        "color":"#000"
    }
}
&files=[
["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)"
],
["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
    }"],
["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)"],
["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,
      },
    })"],
["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,
      },
    })"],
["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',
      },
    })"]
]
&vendorComponents=[
    ["redux", "Redux",
        "https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"],
    ["react-redux","ReactRedux",
        "https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"],
    ["redux-persist","redux-persist",
        "https://cdnjs.cloudflare.com/ajax/libs/redux-persist/4.0.0-alpha7/redux-persist.js"]
]
&panes=["editor","player"]