Sfoglia il codice sorgente

优化头部组件

wangkang3 5 anni fa
parent
commit
cefd566ae4

+ 10 - 3
wechat_demo/app/Details.js

@ -1,5 +1,5 @@
1 1
import React, { Component } from 'react';
2
import {View,Text,Image,StyleSheet,ScrollView,Platform,Dimensions} from 'react-native'; 
2
import {View,Text,Image,StyleSheet,ScrollView,Platform,Dimensions, TouchableOpacity} from 'react-native'; 
3 3
import { WebView } from 'react-native-webview';
4 4
import Header from './Header'
5 5
var {height,width} =  Dimensions.get('window');
@ -12,7 +12,11 @@ export default class Details extends Component{
12 12
    render() {
13 13
        return (
14 14
            <View style={{flex:1}}>
15
                <Header title='返回' leftEvent={()=>this.back(this)}></Header>
15
                <Header>
16
                    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignContent: 'center',  flexDirection: 'column', textAlign: 'center',}} onPress={()=>this.back(this)}>
17
                        <Image style={styles.tabImg} source={require('../static/img/back.png')} />
18
                    </TouchableOpacity>
19
                </Header>
16 20
                {/* <ScrollView style={{height:height-50}}> */}
17 21
                    {/* <View style={{alignItems:'center',height:height-50}}>
18 22
                        <View><Text style={{fontSize:15,marginTop:40}}>3号免手洗</Text></View>
@ -32,5 +36,8 @@ export default class Details extends Component{
32 36
}
33 37
34 38
const styles = StyleSheet.create({
35
 
39
    tabImg:{
40
        width:30,
41
        height:30
42
    }
36 43
})

+ 10 - 2
wechat_demo/app/Header.js

@ -7,7 +7,7 @@
7 7
 * @lint-ignore-every XPLATJSCOPYRIGHT1
8 8
 */
9 9
10
import React, {Component} from 'react';
10
import React, {Component, Children} from 'react';
11 11
import {Modal, StyleSheet, Text, View,Image,TouchableOpacity,TouchableHighlight} from 'react-native';
12 12
import ModalContent from './ModalContent'
13 13
@ -21,13 +21,21 @@ export default class Header extends Component {
21 21
        this.setState({ modalVisible: visible });
22 22
      }
23 23
    
24
      renderTitle(){
25
        let {children,title} =  this.props
26
        if(title){
27
          title = <Text style={styles.headerLeftText} numberOfLines={1}>{title}</Text>
28
        }
29
        return title?title:children
30
      }
24 31
25 32
  render() {
26 33
    return (
27 34
      <View style={{height:50}}>
28 35
        <View style={styles.headerContainer}>
29 36
          <View style={styles.headerLeft}>
30
            <Text style={styles.headerLeftText} onPress={()=>{this.props.leftEvent()}}>{this.props.title}</Text>
37
            {this.renderTitle()}
38
            {/* <Text style={styles.headerLeftText} onPress={()=>{this.props.leftEvent()}}>{this.props.title}</Text> */}
31 39
          </View>
32 40
          <View style={styles.headerRight}>
33 41
            <TouchableOpacity style={styles.clickButton,styles.leftButton} onPress={() => {

+ 1 - 1
wechat_demo/app/Home.js

@ -247,7 +247,7 @@ export default class Home extends Component {
247 247
        console.log(barItems)
248 248
        return (
249 249
            <View>
250
                <Header title="我的二维码" leftEvent={() => { }}></Header>
250
                <Header title="我的二维码"></Header>
251 251
                <SegmentedBar
252 252
                    justifyItem={justifyItem}
253 253
                    indicatorType={indicatorType}

BIN
wechat_demo/static/img/back.png