bee-ui/src/KitchenSink/index.js

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

import {
  Modal, ScrollView, Text, TouchableWithoutFeedback, View,
} from 'react-native';

import Demo from '../demo';

class KitchenSink extends Component {

  state = {
    modalVisible: false,
    target: null,
  }

  hideModal = () => {
    this.setState({
      modalVisible: false,
    })
  }

  openModal = target => {
    this.setState({
      modalVisible: true,
      target,
    })
  }

  render() {
    const { state, openModal, hideModal } = this;
    const { modalVisible, target } = state;
    const Content = Demo[target];
    return (
      <View flex={1}>
        <ScrollView backgroundColor="#eee">
          <View height={100} justifyContent="space-around" padding={20}>
            <Text style={{ fontSize: 20 }}>BeeUI</Text>
            <Text>A React Native UI Libary.</Text>
          </View>
          {Object.keys(Demo).map((key, index) => (
            <View key={index}>
              <TouchableWithoutFeedback onPress={() => openModal(key)}>
                <View backgroundColor="#fff" height={40} justifyContent="center" margin={10} marginTop={0} paddingLeft={10}>
                  <Text>{key}</Text>
                </View>
              </TouchableWithoutFeedback>
            </View>
          ))}
        </ScrollView>
        <Modal animationType="slide" transparent visible={modalVisible}>
          <View backgroundColor="rgba(0,0,0,.3)" marginTop={20} flex={1}>
            <View alignItems="center" backgroundColor="#fff" flexDirection="row" height={44}>
              <View bottom={0} justifyContent="center" left={0} position="absolute" right={0} top={0}>
                <Text style={{ textAlign: 'center' }}>{target}</Text>
              </View>
              <TouchableWithoutFeedback onPress={hideModal}>
                <View backgroundColor="#000" marginLeft={6} paddingHorizontal={6} paddingVertical={6}>
                  <Text style={{ color: '#fff' }}>关闭</Text>
                </View>
              </TouchableWithoutFeedback>
            </View>
            <View backgroundColor="#fff" flex={1}>
              <Content />
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

export default KitchenSink;