mobile / YH_RNComponent · Commits

Go to a project

Authored by 盖剑秋
Commit d650865b24c118026879eddca1f38e4bee48a356 1 parent 0db50e2a

rename.

Inline Side-by-side
Showing 10 changed files with 0 additions and 460 deletions
'use strict'
/**
* 发帖页
*/
import React, {Component} from 'react';
import {
StyleSheet,
View,
TextInput,
Image,
Platform,
Dimensions,
Text,
TouchableOpacity,
Keyboard,
Animated,
Easing,
ScrollView,
NativeModules,
} from 'react-native'
let dismissKeyboard = require('dismissKeyboard');
let YH_CommunityAssetsPicker = NativeModules.YH_CommunityAssetsPicker;
export default class Posting extends Component {
constructor(props) {
super(props);
this.titleLength=0;
this.contentLength=0;
this.blurAll = this.blurAll.bind(this);
this.showBoardPannel = this.showBoardPannel.bind(this);
this.ignoreChange=false;
this.boardInView=false;
this.boardPressedWithItem = this.boardPressedWithItem.bind(this);
this.boardSelectionHeight = 257;
this.state = {
contentInputHeight: new Animated.Value(0),
}
}
componentDidMount(){
this.setState({contentInputHeight: new Animated.Value(height-navbarHeight-44-0.5-41)});
Keyboard.addListener('keyboardWillChangeFrame',(event)=>{
if (this.ignoreChange) {
return;
}
console.log(event);
let kbdHeight = height - event.endCoordinates.screenY;
this.boardSelectionHeight=kbdHeight;
let targetHeight = height-navbarHeight-44-0.5-41- kbdHeight;
this.stretchContentInputToHeight(targetHeight, event.duration);
});
}
stretchContentInputToHeight(newHeight, anmDuration) {
this.state.contentInputHeight.addListener(event=>{
if (event.value == newHeight) {
this.ignoreChange = false;
}
});
Animated.timing(this.state.contentInputHeight, {
toValue: newHeight,
duration:anmDuration,
easing:Easing.keyboard,
}).start();
}
blurAll() {
console.log('blurred.....');
dismissKeyboard();
if (this.boardInView) {
let targetHeight = height-navbarHeight-44-0.5-41;
this.stretchContentInputToHeight(targetHeight, 250);
this.boardInView=false;
}
}
showBoardPannel() {
dismissKeyboard();
console.log('aaa'+this.props.boards);
this.ignoreChange=true;
this.boardInView= true;
let targetHeight = height-navbarHeight-44-0.5-41- this.boardSelectionHeight;
this.stretchContentInputToHeight(targetHeight, 250);
}
boardPressedWithItem(index) {
console.log(index);
}
render() {
return(
<View style={styles.container}>
<TextInput
style={styles.titleInput}
placeholderTextColor='#b0b0b0'
placeholder='标题（可选填）'
maxLength={30}
numberOfLines={1}
autoFocus={true}
onChangeText={
(text)=>{
this.titleLength = text.length;
}
}
onKeyPress={
(event)=>{
if (this.titleLength>=30) {
console.log('满了');
}
}
}
/>
<View style={styles.titleSeporator}/>
<Animated.View
style={[styles.contentInputContainer,{height:this.state.contentInputHeight}]}
>
<TextInput
style={styles.contentInput}
placeholder='#b0b0b0'
placeholder='用力敲出你想说的...'
maxLength={2000}
multiline={true}
onChangeText={
(text)=>{
this.contentLength = text.length;
}
}
onKeyPress={
(event)=>{
if (this.contentLength>=2000) {
console.log('满了');
}
}
}
/>
</Animated.View>
<View style={styles.toolContainer}>
<TouchableOpacity style={styles.imgIcon} onPress={()=>{YH_CommunityAssetsPicker.presentTest();}}>
<Image source={require('../../images/pic1.png')}/>
</TouchableOpacity>
<TouchableOpacity style={styles.keyboardIcon} onPress={this.blurAll}>
<Image style={styles.keyboardIcon} source={require('../../images/jianpan1.png')} />
</TouchableOpacity>
<View style={styles.rightContainer}>
<Text
style={styles.boardText}
onPress={this.showBoardPannel}
>
{this.props.selectedBoard}
</Text>
</View>
</View>
<View style={[styles.boardSelectionContainer]}>
<View style={styles.boardSelectionScroll}>
{this.props.boards.map((item,i)=>{
return(
<Text
style={styles.boardSelectionItem}
onPress={event=>{
this.props.onBoardPress(item.forumName);
this.blurAll();
}
}
>
{item.forumName}
</Text>
);
}
)}
</View>
</View>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;
const styles = StyleSheet.create({
container: {
top: 0,
flex: 1,
},
titleInput: {
left: 0,
top:0,
height:44,
padding:15,
color: 'black',
fontSize: 15,
},
contentInputContainer: {
left:0,
top:0,
},
contentInput: {
left:0,
top:0,
bottom:0,
right:0,
padding: 15,
color: 'black',
fontSize:15,
flex:1,
},
titleSeporator: {
left: 15,
top:0,
right:0,
height:0.5,
backgroundColor: '#a0a0a0',
},
boardSelectionContainer: {
height: 250,
},
boardSelectionScroll: {
flex:1,
padding: 15,
paddingTop:10,
flexDirection:'row',
flexWrap:'wrap',
justifyContent:'space-between',
},
boardSelectionItem: {
height: 21,
paddingTop:3,
width: (width-45)/3,
borderColor: '#a0a0a0',
marginBottom:10,
backgroundColor:'#f2f2f2',
borderWidth:0.5,
fontSize: 14,
textAlign: 'center',
justifyContent:'space-between',
flexWrap:'wrap',
},
toolContainer: {
flexDirection: 'row',
marginBottom:0,
right:0,
left:0,
height: 41,
borderColor: '#a0a0a0',
borderBottomWidth:0.5,
borderTopWidth:0.5,
alignItems:'center',
justifyContent: 'center',
},
imgIcon: {
left:15,
width:19,
height:19,
marginRight:29,
},
keyboardIcon: {
width:20,
height:20,
},
rightContainer: {
flexDirection: 'column',
height:41,
width:width-68,
alignItems:'flex-end',
},
boardText: {
backgroundColor: '#e0e0e0',
height: 21,
fontSize:14,
textAlign: 'center',
paddingLeft: 10,
paddingRight:10,
paddingTop: 3,
marginRight:10,
marginTop: 10,
fontWeight:'100',
}
});
import React, {Component} from 'react';
import {
View,
Text,
Image,
StyleSheet,
} from 'react-native'
export default class SPHeaderCell extends Component {
constructor(props) {
super(props);
}
renderName() {
if (this.props.data.owner) {
return(
<Text style={styles.nameLabel}>
{this.props.data.name + ' | '}
<Text style={styles.ownerColor}>楼主</Text>
</Text>
);
} else {
return(
<Text style={styles.nameLabel}>this.props.data.name</Text>
);
}
}
renderDelete() {
if (this.props.data.owner) {
return(
<Text style={[styles.nameLabel, styles.ownerColor, styles.deletePosition]}>
删除本帖
</Text>
);
}
}
render() {
return(
<View style={styles.container}>
<Image
style={styles.avatar}
source={{uri:this.props.data.avatar}}
/>
<Text style={styles.timeLabel}>{this.props.data.time}</Text>
{this.renderName()}
{this.renderDelete()}
<Text style={styles.fromLabel}>{this.props.data.templete}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
avatar: {
top: 15,
left: 15,
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: 'grey',
},
//来自哪个模块
fromLabel: {
top:15,
right:15,
height: 20,
backgroundColor: '#aaaaaa',
fontSize: 15,
textAlign: 'center'
},
nameLabel: {
top: 15,
marginLeft: 15,
height: 20,
fontSize: 12,
color: 'black',
backgroundColor: 'red',
textAlign: 'left',
bottom: 10,
},
ownerColor: {
color: '#4a90e2',
},
deletePosition: {
left: 0,
top: 60,
},
timeLabel: {
top: 32,
height: 12,
left: 15,
fontSize: 10,
color: '#999999',
},
});
'use strict'
import React, {Component} from 'react';
import {
View,
Text,
ListView,
StyleSheet,
} from 'react-native'
import SPHeaderCell from './SPHeaderCell'
export default class SubjectPost extends Component {
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({
rowHasChanged:(r1,r2)=> r1 != r2,
sectionHeaderHasChanged: (s1, s2) => s1 != s2,
});
this.renderRow = this.renderRow.bind(this);
}
renderRow(rowData, sectionId) {
console.log(sectionId);
switch (sectionId) {
case 'header':
return(
<SPHeaderCell data={rowData}/>
);
break;
default:
break;
}
}
render() {
const testDataBlob = {
"header": [
{
"name":"川本小一郎",
"avatar":"http://img0.imgtn.bdimg.com/it/u=441053097,4234222567&fm=21&gp=0.jpg",
"owner":true,
"templete":"永恒的潮流",
"time":"2小时前",
}
],
}
return(
<ListView
style={styles.container}
dataSource={this.dataSource.cloneWithRowsAndSections(testDataBlob)}
renderRow={this.renderRow}
enableEmptySections={true}
/>
);
}
}
const styles = StyleSheet.create({
container: {
top: 0,
flex: 1,
},
});