// Component const Touchable = ({ onPress, children }) => ( Platform.OS === 'android' ? <TouchableNativeFeedback onPress={onPress}>{ children }</TouchableNativeFeedback> : <TouchableOpacity onPress={onPress}>{ children }</TouchableOpacity> )
// Component const ActionIcon = ({ onPress, icon }) => { return( <TouchableOpacity onPress={onPress}> <View style={styles.container}> <Icon name={icon} size={font(22)} color={white} /> </View> </TouchableOpacity> ) }
function ModeSwitch ({ value, onChange, }) { const isHeatMode = value === 'heat'; return ( <TouchableOpacity onPress={() => onChange(isHeatMode ? 'cool' : 'heat')}> <View> <View style={styles.background} /> <View style={[styles.circle, { marginLeft: !isHeatMode ? 25 : 2 }]} /> <Image source={require('app/assets/icon_hot.png')} style={styles.iconHot} resizeMode="contain" /> <Image source={require('app/assets/icon_cold_white.png')} style={styles.iconCold} resizeMode="contain" /> </View> </TouchableOpacity> ); }
render() { const { item } = this.props; return ( <TouchableOpacity onPress={this.handlePress}> <View style={styles.root}> <Text style={[styles.text, item.completed && styles.textCompleted]}> {item.content} </Text> </View> </TouchableOpacity> ); }
render() { const { text } = this.state; return ( <View style={styles.root}> <TextInput placeholder="Add thing to do ..." value={text} onChangeText={text => this.setState({ text })} style={styles.input} /> <TouchableOpacity style={styles.button} onPress={this.handlePress}> <Text style={styles.buttonText}>ADD</Text> </TouchableOpacity> </View> ); }
render() { return ( <ScrollView style={styles.container}> <ListView enableEmptySections={true} dataSource={this.state.dataSource} renderRow={(rowData) => <TouchableOpacity style={styles.item} onPress={this._showDetail.bind(this,rowData.url,rowData.title)}> <View> <Image style={styles.img} resizeMode="cover" source={{uri:rowData.img}} /> </View> <View style={styles.warper}> <Text style={styles.title} numberOfLines={1}>{rowData.title}</Text> <Text style={styles.date}>{rowData.time.split("T")[0]}</Text> </View> </TouchableOpacity> }/> </ScrollView> ); }
render() { var views = []; var data = this.state.data; for (var i in data) { views.push( <TouchableOpacity style={[styles.view_item,styles.view_item_left]} key={i} onPress={this._showDetail.bind(this,data[i].url,data[i].title)}> <Image style={styles.text_img} resizeMode="cover" source={{uri:data[i].img}}/> </TouchableOpacity > ) } return ( <View style={styles.container}> <View> <Text style={styles.text_title}></Text> </View> <View style={styles.view_img}> {views} </View> <View> <Text style={styles.text_more}>查看更多同期专题 ></Text> </View> </View> ); }
render() { return ( <ScrollView style={styles.container}> <TouchableOpacity style={styles.image_view}> <Image style={styles.icon} source={{uri:'http://ogxr430c8.bkt.clouddn.com/logo.png'}} esizeMode="contain"/> <Text style={styles.version}>V1.0.0</Text> </TouchableOpacity> <TouchableOpacity style={[styles.text_view,styles.text_margin]} onPress={this._showDetail.bind(this, About, "功能介绍", "Right")}> <Text style={styles.text}>功能介绍</Text> </TouchableOpacity> <TouchableOpacity style={[styles.text_view]} onPress={this._showDetail.bind(this, Help, "帮助中心", "Right")}> <Text style={styles.text}>帮助中心</Text> </TouchableOpacity> <TouchableOpacity style={[styles.text_view]} onPress={this._showDetail.bind(this, Detail, "服务条款", "Right")}> <Text style={styles.text}>服务条款</Text> </TouchableOpacity> <TouchableOpacity style={[styles.text_view,styles.text_view_bottom]} onPress={this._showAuthor}> <Text style={styles.text}>关于</Text> </TouchableOpacity> </ScrollView> ); }
render() { var view_top = []; var view_bottom = []; var data = this.state.data; for (var i in data) { let view = ( <TouchableOpacity style={styles.cat_item} key={i} onPress={this._goToList.bind(this, data[i].text)}> <Text style={styles.cat_title}>{data[i].text}</Text> </TouchableOpacity> ); if (i < 2) { view_top.push(view); } else { view_bottom.push(view); } } return ( <View style={styles.container}> <View> <Text style={styles.text_title}>分类</Text> </View> <View style={styles.cat_view}> {view_top} </View> <View style={styles.cat_view}> {view_bottom} </View> </View> ); }
render() { return ( <ScrollView style={styles.container}> <TouchableOpacity style={styles.image_view}> <Image style={styles.icon} source={require('image!logo')} esizeMode="contain"/> <Text style={styles.version}>V1.0.0</Text> </TouchableOpacity> <TouchableOpacity style={[styles.text_view,styles.text_margin]} onPress={this._showDetail.bind(this, About, "功能介绍")}> <Text style={styles.text}>功能介绍</Text> </TouchableOpacity> <TouchableOpacity style={[styles.text_view]} onPress={this._showDetail.bind(this, Help, "帮助中心")}> <Text style={styles.text}>帮助中心</Text> </TouchableOpacity> <TouchableOpacity style={[styles.text_view]} onPress={this._showDetail.bind(this, Detail, "服务条款")}> <Text style={styles.text}>服务条款</Text> </TouchableOpacity> <TouchableOpacity style={[styles.text_view,styles.text_view_bottom]} onPress={this._showAuthor}> <Text style={styles.text}>关于</Text> </TouchableOpacity> </ScrollView> ); }
// Component const Touchable = ({ onPress, children }) => ( Platform.OS === 'android' ? <TouchableNativeFeedback onPress={onPress}>{ children }</TouchableNativeFeedback> : <TouchableOpacity onPress={onPress}>{ children }</TouchableOpacity> )
// Component const ActionIcon = ({ onPress, icon }) => { return( <TouchableOpacity onPress={onPress}> <View style={styles.container}> <Icon name={icon} size={font(22)} color={white} /> </View> </TouchableOpacity> ) }
render() { return ( <ScrollView style={styles.container}> <ListView enableEmptySections={true} dataSource={this.state.dataSource} renderRow={(rowData) => <TouchableOpacity style={styles.item} onPress={this._showDetail.bind(this,rowData.url,rowData.title)} > <View> <Image style={styles.img} resizeMode="cover" source={{uri:rowData.img}} /> </View> <View style={styles.warper}> <Text style={styles.title} numberOfLines={1}>{rowData.title}</Text> <Text style={styles.date}>{rowData.time.split("T")[0]}</Text> </View> </TouchableOpacity> }/> </ScrollView> ); }
render() { var views = []; var data = this.state.data; for (var i in data) { views.push( <TouchableOpacity style={[styles.view_item,styles.view_item_left]} key={i} onPress={this._showDetail.bind(this,data[i].url,data[i].title)}> <Image style={styles.text_img} resizeMode="cover" source={{uri:data[i].img}}/> </TouchableOpacity > ) } return ( <View style={styles.container}> <View> <Text style={styles.text_title}></Text> </View> <View style={styles.view_img}> {views} </View> <View> <Text style={styles.text_more}>查看更多同期专题 ></Text> </View> </View> ); }
render() { var view_top = []; var view_bottom = []; var data = this.state.data; for (var i in data) { let view = ( <TouchableOpacity style={styles.cat_item} key={i} onPress={this._goToList.bind(this, data[i].text)}> <Text style={styles.cat_title}>{data[i].text}</Text> </TouchableOpacity> ); if (i < 2) { view_top.push(view); } else { view_bottom.push(view); } } return ( <View style={styles.container}> <View> <Text style={styles.text_title}>分类</Text> </View> <View style={styles.cat_view}> {view_top} </View> <View style={styles.cat_view}> {view_bottom} </View> </View> ); }