bluejoyq / searchGuide

Go to a project
Toggle navigation Toggle navigation pinning
bluejoyq
2bc40f56 1 parent e672d169

working for loading animation while searching

Inline Side-by-side
Showing 10 changed files with 133 additions and 32 deletions
......@@ -2,8 +2,8 @@
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 19001,
"packagerPid": 4420,
"packagerPid": 19948,
"expoServerNgrokUrl": "https://ep-ukj.anonymous.searchguide.exp.direct",
"packagerNgrokUrl": "https://packager.ep-ukj.anonymous.searchguide.exp.direct",
"ngrokPid": 26692
"ngrokPid": 12884
}
......
import React from 'react';
import {View,ActivityIndicator,StyleSheet} from 'react-native'
import AppContainer from './components/AppContainer/AppContainer';
import SafeAreaView from 'react-native-safe-area-view';
import SearchBar from './components/SearchBar/SearchBar';
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
loading:true
};
}
render(){
return (
<>
<SearchBar />
<SafeAreaView style={{flex: 1, backgroundColor:'#eee'}}>
<AppContainer />
</SafeAreaView>
</>
)
return (
<>
{this.state.loading ? <View><ActivityIndicator size="large" color="#0000ff" /></View> : null}
<AppContainer />
</>
)
}
}
\ No newline at end of file
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
});
\ No newline at end of file
......
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
presets: ['babel-preset-expo','module:metro-react-native-babel-preset','module:react-native-dotenv'],
env: {
production: {
plugins: ['react-native-paper/babel'],
......
import React from 'react';
import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN} from 'react-native-dotenv';
import {createAppContainer} from 'react-navigation';
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import Home from '../Home/Home';
import Rate from '../Rate/Rate';
const AppTabNavigator = createMaterialTopTabNavigator (
{
Home: Home,
......@@ -13,13 +15,13 @@ const AppTabNavigator = createMaterialTopTabNavigator (
initialRouteName: 'Home',
tabBarPosition: 'bottom',
tabBarOptions:{
activeTintColor: '#f0edf6',
inactiveTintColor: '#226557',
activeTintColor: WHITE_MAIN,
inactiveTintColor: DARK_MAIN,
indicatorStyle: {
backgroundColor: '#f0edf6',
backgroundColor: WHITE_MAIN,
},
style:{
backgroundColor:'#3BAD87',
backgroundColor:LIGHT_MAIN,
allowFontScaling : 'true'
},
showIcon: true,
......
import React from 'react';
import { View, Text} from 'react-native';
import { View} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import SearchBar from '../SearchBar/SearchBar';
import SearchCard from '../SearchCard/SearchCard';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
static navigationOptions={
......@@ -16,9 +18,11 @@ class Home extends React.Component {
render() {
return(
<View>
<Text>검색</Text>
<View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}>
<SearchBar />
<SearchCard title={'네이버- 지식인...인간사냥꾼 니달리를ㄴㄴㅁ'} content={'문도 가고 싶은 데로 간다!'} url={'https://www.naver.com'}/>
</View>
)
}
......
......@@ -17,7 +17,7 @@ class Rate extends React.Component {
render() {
return(
<View >
<View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}>
<Text >평가</Text>
</View>
)
......
import React from 'react';
import {View,ScrollView} from 'react-native';
import { Searchbar } from 'react-native-paper';
import { Searchbar, Divider, Text } from 'react-native-paper';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class SearchBar extends React.Component {
state = {
firstQuery: '',
};
constructor(props){
super(props);
this.state = {
query: '',
};
}
queryChange=(query)=>{
this.setState({ query: query });
}
submit=()=>{
alert(this.state.query);
this.setState({query:''});
}
render(){
return(
<>
<View style={{margin:0,padding:0}}>
<View>
<Searchbar
placeholder="검색할 질문을 입력하세요."
onChangeText={query => { this.setState({ firstQuery: query }); }}
value={this.state.firstQuery}
onChangeText={this.queryChange}
value={this.state.query}
icon='microphone'
onIconPress={()=>{alert("원래는 음성 인식 창!")}}
onSubmitEditing={this.submit}
/>
</View>
</>
......
import React from 'react';
import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN} from 'react-native-dotenv';
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
import {Linking } from 'react-native';
const MyComponent = (props) => (
<Card style={{margin:10}}>
<Card.Title title={props.title}
left={ (props) => (
<Avatar.Icon {...props} icon="folder" color={WHITE_MAIN}style={{backgroundColor:LIGHT_MAIN}} /> ) }
/>
<Card.Content>
<Paragraph>{props.content}</Paragraph>
</Card.Content>
<Card.Actions style={{flexDirection:'row-reverse'}}>
<Button mode='contained' color= {LIGHT_MAIN} labelStyle={{color:WHITE_MAIN}} onPress={()=>{Linking.openURL(props.url)}}>
자세히보기
</Button>
</Card.Actions>
</Card>
);
export default MyComponent;
\ No newline at end of file
......@@ -1603,6 +1603,15 @@
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
},
"babel-plugin-dotenv": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/babel-plugin-dotenv/-/babel-plugin-dotenv-0.1.1.tgz",
"integrity": "sha1-nI+upnp8A0/n6UCZGHqy51c0ALw=",
"dev": true,
"requires": {
"dotenv": "^2.0.0"
}
},
"babel-plugin-dynamic-import-node": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz",
......@@ -2355,6 +2364,12 @@
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
"integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
},
"dotenv": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-2.0.0.tgz",
"integrity": "sha1-vXWcNXqqcDZeAclrewvsCKbg2Uk=",
"dev": true
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
......@@ -5020,6 +5035,15 @@
"resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
"integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
},
"path": {
"version": "0.12.7",
"resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
"integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
"requires": {
"process": "^0.11.1",
"util": "^0.10.3"
}
},
"path-browserify": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.0.tgz",
......@@ -5494,6 +5518,15 @@
"resolved": "https://registry.npmjs.org/react-native-branch/-/react-native-branch-3.0.1.tgz",
"integrity": "sha512-vbcYxPZlpF5f39GAEUF8kuGQqCNeD3E6zEdvtOq8oCGZunHXlWlKgAS6dgBKCvsHvXgHuMtpvs39VgOp8DaKig=="
},
"react-native-dotenv": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/react-native-dotenv/-/react-native-dotenv-0.2.0.tgz",
"integrity": "sha1-MRVRy2o1o9z+3mSL3tVcDj7OV50=",
"dev": true,
"requires": {
"babel-plugin-dotenv": "0.1.1"
}
},
"react-native-gesture-handler": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz",
......@@ -6970,6 +7003,21 @@
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
},
"util": {
"version": "0.10.4",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
"integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
"requires": {
"inherits": "2.0.3"
},
"dependencies": {
"inherits": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
}
}
},
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
......
......@@ -12,6 +12,7 @@
"expo": "^35.0.0",
"expo-permissions": "~7.0.0",
"expo-speech": "~7.0.0",
"path": "^0.12.7",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
......@@ -26,7 +27,8 @@
"react-navigation-tabs": "^2.5.6"
},
"devDependencies": {
"babel-preset-expo": "^7.1.0"
"babel-preset-expo": "^7.1.0",
"react-native-dotenv": "^0.2.0"
},
"private": true
}
......