1.Dialog
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import Dialog, { SlideAnimation, DialogFooter, DialogButton, DialogContent } from 'react-native-popup-dialog';
export default class App extends Component {
constructor(props) {
super(props);
this.state={
visible: false
}
}
render() {
return (
<View>
<Dialog
visible={this.state.visible}
onTouchOutside={() => {
this.setState({ visible: false });
}}
>
<DialogContent>
<View style={{ width: 300, height: 300, alignItems: "center", justifyContent: "flex-start" }}>
<View style={{ backgroundColor: "#FFFFFF", width: "100%", flexDirection: "row" }}>
<View style={{ width: "80%", height: 40 }}></View>
<View style={{ width: "20%", height: 40 }}>
<ButtonIconText source={require('./../assets/icon/close.png')} style={{ paddingTop: 20 }} title="" onPress={() => { this.setState({ visible: false }); }}></ButtonIconText>
</View>
</View>
<View style={{ marginTop: 10 }}>
Content of Dialog
</View>
</View>
</DialogContent>
</Dialog>
</View>
);
}
}
2.Modal
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import Modal from 'react-native-modal';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
visible: false
}
}
closeModal = () => {
}
render() {
return (
<View>
<Modal isVisible={this.state.visible} style={{
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomRightRadius: 10,
borderBottomLeftRadius: 10,
overflow: 'hidden'
}}>
<View style={{ backgroundColor: "#FFFFFF", width: "100%", flexDirection: "row" }}>
<View style={{ backgroundColor: "#BBCCF9", flexDirection: "row" }}>
<View style={{ width: "90%" }}>
<Text style={{ fontSize: 20, paddingLeft: 20, paddingTop: 10 }}>เพิ่มโปรเจค</Text>
</View>
<View style={{ width: "10%" }}>
<AppButton title="x" onPress={this.closeModal}></AppButton>
</View>
</View>
</View>
<View style={{ backgroundColor: "#FFFFFF", flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "flex-start" }}>
Content
</View>
</Modal>
</View>
);
}
}
3.FlatList
App.js
import React, { Component } from 'react';
import { View, FlatList,ScrollView,StyleSheet} from 'react-native';
import TabProject from '../TabProject';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
visible: false
}
}
itemSeparator = () => {
return (
<View
style={{
height: .5,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
render() {
return (
<View>
<ScrollView>
{this.state.visible && <FlatList
data={this.props.projectReducer.projects}
initialValues={{ text: "" }}
keyExtractor={(item, index) => index.toString()}
ItemSeparatorComponent={this.itemSeparator}
renderItem={({ item }) => { return (<TabProject data={item}></TabProject>) }}
style={{ marginTop: 10 }} />
}
</ScrollView>
</View>
);
}
}
4.SimplePopupMenu
App.js
import React, { Component } from 'react';
import { View} from 'react-native';
import SimplePopupMenu from 'react-native-simple-popup-menu';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
items: [
{ id: 'pin', label: 'ปักหมุด' },
{ id: 'edit', label: 'แก้ไข' },
{ id: 'delete', label: 'ลบ' },
],
}
}
onMenuPress = (obj) => {
if (obj.id == "edit") {
//edit
} else if (obj.id == "pin") {
//pin
} else {
//delete
}
}
render() {
return (
<View>
<SimplePopupMenu
items={this.state.items}
onSelect={this.onMenuPress}
onCancel={() => console.log('onCancel')}
style={{ height: 50 }}>
<Image source={require('./../assets/icon/dot.png')} style={{ width: 10, height: 20, marginTop: 5 }}></Image>
</SimplePopupMenu>
</View>
);
}
}
5.CheckBox
CheckBox.js
import React, { Component } from 'react';
import { View, Image, StyleSheet, Dimensions, Text, Button, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons'
export default CheckBox = ({ selected, onPress, style, textStyle, size = 30, color = '#211f30', text = '', ...props}) => (
<TouchableOpacity style={[styles.checkBox, style]} onPress={onPress} {...props}>
<Icon
size={size}
color={color}
name={ selected ? 'check-box' : 'check-box-outline-blank'}
/>
<Text style={textStyle}> {text} </Text>
</TouchableOpacity>
);
const styles = StyleSheet.create({
checkBox: {
flexDirection: 'row',
alignItems: 'center'
}
})
App.js
import React, { Component } from 'react';
import { View} from 'react-native';
import CheckBoxCommon from './../CheckBox';
import CheckBox from 'react-native-bouncy-checkbox';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
check: false
}
}
onClickCheckAll=()=>{
}
onCheck=()=>{
}
render() {
return (
<View>
<CheckBoxCommon selected={this.state.check} text="" onPress={this.onClickCheckAll} ></CheckBoxCommon>
<CheckBox isChecked={this.state.check } text="test" onPress={() => this.onCheck()}></CheckBox>
</View>
);
}
}
6.Collapse
ImageAlbum.js
import React, { Component } from 'react';
import { View,StyleSheet } from 'react-native';
import { Collapse, CollapseHeader, CollapseBody, AccordionList } from 'accordion-collapse-react-native';
export default class ImageAlbum extends Component {
constructor(props) {
super(props);
}
_renderItem = ({ item, index }) => {
return (
<View style={styles.slide, { backgroundColor: "#FFFFFF" }}>
<Image source={{ uri: "https://programmerdesign.com/" + item.path }} style={{ width: 350, height: 350 }}> </Image>
</View>
);
}
render() {
return (
<View>
<Collapse >
<CollapseHeader>
<View style={styles.CollapseStyle}>
<Text style={{ fontSize: 20 }}>รายละเอียด : </Text>
</View>
</CollapseHeader>
<CollapseBody>
<View style={{ paddingLeft: 20, height: 120 }}>
<Text>{this.props.data.details} </Text>
</View>
</CollapseBody>
</Collapse>
</View >
);
}
}
const styles = StyleSheet.create({
CollapseStyle: {
paddingLeft: 20,
backgroundColor: "white",
borderBottomWidth: 2,
borderColor: "#BBCCF9",
height: 30 },
});
7.Carousel
ImageAlbum.js
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import Carousel from 'react-native-snap-carousel';
export default class ImageAlbum extends Component {
constructor(props) {
super(props);
}
_renderItem = ({ item, index }) => {
return (
<View style={styles.slide, { backgroundColor: "#FFFFFF" }}>
<Image source={{ uri: "https://programmerdesign.com/" + item.path }} style={{ width: 350, height: 350 }}></Image>
</View>
);
}
render() {
return (
<View>
<Carousel
ref={(c) => { this._carousel = c; }}
data={this.props.picReducer.pics}
renderItem={this._renderItem}
sliderWidth={350}
itemWidth={350}
/>
</View>
);
}
}
8.AirbnbRating
ImageAlbum.js
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Rating, AirbnbRating } from 'react-native-ratings';
export default class ImageAlbum extends Component {
constructor(props) {
super(props);
}
_renderItem = ({ item, index }) => {
return (
<View style={styles.slide, { backgroundColor: "#FFFFFF" }}>
<Image source={{ uri: "https://programmerdesign.com/" + item.path }} style={{ width: 350, height: 350 }}></Image>
</View>
);
}
render() {
return (
<View>
<AirbnbRating
count={this.props.data.point}
reviews={[]}
defaultRating={5}
size={15}
style={{ padding: 0 }}
/>
</View>
);
}
}
9.TabView
MyNotes.js
import * as React from 'react';
import { Button, Text, View, StyleSheet, Dimensions, Image, Animated } from 'react-native';
import Notes from '../components/Notes';
import ImageAlbum from './../components/ImageAlbum';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import * as RootNavigation from '../RootNavigation';
import { useIsFocused } from '@react-navigation/native';
import ButtonIconText from './../components/ButtonIconText';
const initialLayout = { width: Dimensions.get('window').width };
export default function MyNotes({ route, navigate }) {
const [index, setIndex] = React.useState(route.params.index);
const [routes] = React.useState([
{ key: 'first', title: 'โน๊ต', pdata: route.params.pdata },
{ key: 'second', title: 'รูปภาพ', pdata: route.params.pdata },
]);
const isFocused = useIsFocused();
return (<View>
<View style={{ width: '100%', height: '100%' }}>
<View style={{ flexDirection: "row", width: "100%", backgroundColor: "#BBCCF9", paddingTop: 10 }}>
<View style={{ width: "5%", paddingTop: 16 }}>
<ButtonIconText title="" style={{ color: "#000", fontSize: 12 }} source={require('./../assets/icon/back.png')} onPress={() => { RootNavigation.goBack(); }}><ButtonIconText>
</View>
<View style={{ width: "80%" }}>
<Text style={{ height: 50, fontSize: 20, textAlignVertical: "center", paddingLeft: 20 }}>{route.params.pdata.name}</Text>
</View>
</View>
<TabView
style={{ marginTop: -10 }}
navigationState={{ index, routes }}
renderTabBar={(props) =>
<TabBar {...props} indicatorStyle={{ backgroundColor: "yellow" }}
style={{ backgroundColor: "#BBCCF9" }}
renderLabel={({ route, focused, color }) => {
const label = route.title;
const cc = focused ? "#000000" : "#FFFFFF";
if (route.key == "first") {
return (
<View style={{ flexDirection: "row" }}>
<Image source={require('./../assets/icon/note.png')} style={{ width: 20, height: 20 }}></Image>
<Text style={{ paddingLeft: 5 }}>{label}<Text>
</View>
);
}
else {
return (
<View style={{ flexDirection: "row" }}>
<Image source={require('./../assets/icon/image.png')} style={{ width: 20, height: 20 }}></Image>
<Text style={{ paddingLeft: 5 }}>{label}</Text>
</View>
);
}
}}
renderIcon={({ route, focused, color }) => {
}}
>
</TabBar>
}
renderScene={({ route }) => {
if (route.key == "first") {
return (
<View style={{ width: '100%', height: '100%' }}>
<Notes title="next" pdata={route.pdata} ></Notes>
</View>);
} else {
return (
<View style={{ width: '100%', height: '100%' }}>
<ImageAlbum title="next" pdata={route.pdata} />
</View>);
}
}}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
</View >
</View>
);
};
