Skip to content

Commit d37c0f3

Browse files
duom青源duom青源
duom青源
authored and
duom青源
committed
feat: bugfix
1 parent 8b91cd5 commit d37c0f3

File tree

131 files changed

+718
-130
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

131 files changed

+718
-130
lines changed

‎example/src/App.tsx‎

Lines changed: 108 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,49 @@
1-
import * as React from 'react';
1+
import React, { useState } from 'react';
22
import {
33
StyleSheet,
4-
Text,
4+
View,
5+
Keyboard,
6+
KeyboardEvent,
57
TouchableOpacity,
6-
ScrollView,
7-
ImageResolvedAssetSource,
8+
Text,
89
Image,
9-
View,
1010
} from 'react-native';
1111
import {
1212
IATTextViewBase,
13-
IInserTextAttachmentItem,
14-
ITextType,
1513
IonMentionData,
1614
VariableTextInputView,
1715
} from 'react-native-variable-text-input';
16+
import { EmojiList } from './EmojiList';
1817
export const App = () => {
1918
const inPutRef = React.createRef<IATTextViewBase>();
20-
const onChangeText = (text: string) => {
21-
console.log('====>', text);
22-
};
23-
const insertEmoji = () => {
24-
const data: ImageResolvedAssetSource = Image.resolveAssetSource(
25-
require('./kuxiao.png')
19+
const [keyBoardHeight, setKeyBoardHeight] = useState<number>(0);
20+
// const [showUser, setShowUser] = useState<boolean>(false);
21+
// const [showTags, setShowTags] = useState<boolean>(false);
22+
const [showEmoji, setShowEmoji] = useState<boolean>(false);
23+
// const [ setTextValue] = useState<string>('');
24+
React.useEffect(() => {
25+
const showListener = Keyboard.addListener(
26+
'keyboardDidShow',
27+
keyBoardDidShow
2628
);
27-
inPutRef.current?.insertEmoji({
28-
img: data,
29-
emojiTag: '[苦笑]',
30-
type: ITextType.emoji,
31-
emojiUri: data.uri,
32-
});
33-
};
34-
const blur = () => {
35-
inPutRef.current?.blur();
36-
};
37-
const insertMonthons = () => {
38-
inPutRef.current?.insertMentions({
39-
tag: '@',
40-
name: 'James Harden',
41-
color: '#CEDA39',
42-
id: '123344',
43-
type: ITextType.tagText,
44-
});
45-
};
46-
const changeAttributedText = () => {
47-
const imageData: ImageResolvedAssetSource = Image.resolveAssetSource(
48-
require('./kuxiao.png')
29+
const hideListener = Keyboard.addListener(
30+
'keyboardDidHide',
31+
keyBoardDidHide
4932
);
50-
const emojiData: IInserTextAttachmentItem = {
51-
img: imageData,
52-
emojiTag: '[苦笑]',
53-
type: 1,
54-
emojiUri: imageData.uri,
33+
return () => {
34+
showListener.remove();
35+
hideListener.remove();
5536
};
56-
const tagData: IInserTextAttachmentItem = {
57-
tag: '#',
58-
name: '测试tag',
59-
color: '#CEDA39',
60-
id: '123344',
61-
type: ITextType.tagText,
62-
};
63-
inPutRef.current?.changeAttributedText([
64-
{ type: 0, text: '普通字符' },
65-
emojiData,
66-
tagData,
67-
{ type: 0, text: '普通字符' },
68-
tagData,
69-
emojiData,
70-
{ type: 0, text: '普通字符' },
71-
tagData,
72-
{ type: 0, text: '普通字符' },
73-
tagData,
74-
emojiData,
75-
emojiData,
76-
emojiData,
77-
]);
37+
}, []);
38+
const keyBoardDidShow = (event: KeyboardEvent) => {
39+
setKeyBoardHeight(event.endCoordinates.height);
7840
};
79-
const focus = () => {
80-
inPutRef.current?.focus();
41+
const keyBoardDidHide = () => {
42+
// setKeyBoardHeight(0);
43+
};
44+
const onChangeText = (text: string) => {
45+
// setTextValue(text);
46+
console.log('text===>', text);
8147
};
8248
const sub = (e: any) => {
8349
console.log('rrrrr===>', e);
@@ -86,65 +52,98 @@ export const App = () => {
8652
//todo
8753
console.log('onMentions===>', data);
8854
};
55+
const onTouchEmView = () => {
56+
setKeyBoardHeight(0);
57+
inPutRef.current?.blur();
58+
};
59+
const onTouchContro = () => {
60+
!showEmoji && inPutRef.current?.blur();
61+
showEmoji && inPutRef.current?.focus();
62+
setShowEmoji(!showEmoji);
63+
};
8964
return (
90-
<ScrollView contentContainerStyle={styles.container}>
91-
<VariableTextInputView
92-
style={styles.box}
93-
ref={inPutRef}
94-
onChangeText={onChangeText}
95-
placeholder={'测试测试测试'}
96-
placeholderTextColor={'#fff'}
97-
underlineColorAndroid={'rgba(0,0,0,0)'}
98-
blurOnSubmit={true}
99-
onSubmitEditing={sub}
100-
mentions={['@', '#']}
101-
onMention={onMention}
102-
keyboardAppearance={'dark'}
103-
/>
104-
<View style={{ flexDirection: 'row', marginTop: 40 }}>
105-
<TouchableOpacity onPress={blur} style={{ marginLeft: 20 }}>
106-
<Text style={{ backgroundColor: 'yellow', color: 'red' }}>
107-
{'blur'}
108-
</Text>
109-
</TouchableOpacity>
110-
<TouchableOpacity onPress={focus} style={{ marginLeft: 10 }}>
111-
<Text style={{ backgroundColor: 'yellow', color: 'red' }}>
112-
{'focus'}
113-
</Text>
114-
</TouchableOpacity>
115-
<TouchableOpacity onPress={insertMonthons} style={{ marginLeft: 10 }}>
116-
<Text style={{ backgroundColor: 'yellow', color: 'red' }}>
117-
{'insertMonthons'}
118-
</Text>
119-
</TouchableOpacity>
120-
<TouchableOpacity onPress={insertEmoji} style={{ marginLeft: 10 }}>
121-
<Text style={{ backgroundColor: 'yellow', color: 'red' }}>
122-
{'insertEmoji'}
123-
</Text>
124-
</TouchableOpacity>
65+
<View style={styles.container}>
66+
<View style={{ flex: 1, width: '100%' }}>
12567
<TouchableOpacity
126-
onPress={changeAttributedText}
127-
style={{ marginLeft: 10 }}
128-
>
129-
<Text style={{ backgroundColor: 'yellow', color: 'red' }}>
130-
{'changeAttributedText'}
131-
</Text>
132-
</TouchableOpacity>
68+
onPress={onTouchEmView}
69+
activeOpacity={1}
70+
style={{ flex: 1 }}
71+
/>
72+
</View>
73+
<View>
74+
<View style={styles.hor}>
75+
<VariableTextInputView
76+
style={styles.box}
77+
ref={inPutRef}
78+
onChangeText={onChangeText}
79+
placeholder={'测试测试测试'}
80+
placeholderTextColor={'#fff'}
81+
underlineColorAndroid={'rgba(0,0,0,0)'}
82+
blurOnSubmit={true}
83+
onSubmitEditing={sub}
84+
mentions={['@', '#']}
85+
onMention={onMention}
86+
keyboardAppearance={'dark'}
87+
/>
88+
<TouchableOpacity
89+
activeOpacity={0.85}
90+
style={{ marginLeft: 10 }}
91+
onPress={onTouchContro}
92+
>
93+
<Image
94+
source={
95+
!showEmoji
96+
? require('./assets/icon/emoji_icon.png')
97+
: require('./assets/icon/keyboard_icon.png')
98+
}
99+
style={styles.icon}
100+
/>
101+
</TouchableOpacity>
102+
<View style={styles.sendButton}>
103+
<Text style={styles.sendText}>SEND</Text>
104+
</View>
105+
</View>
106+
<EmojiList numColumns={6} keyBoardHeight={keyBoardHeight} />
133107
</View>
134-
</ScrollView>
108+
</View>
135109
);
136110
};
137111
export default App;
138112
const styles = StyleSheet.create({
139113
container: {
140114
flex: 1,
141115
alignItems: 'center',
142-
justifyContent: 'center',
116+
justifyContent: 'flex-end',
143117
},
144118
box: {
145119
backgroundColor: '#000',
146120
color: '#fff',
147121
fontSize: 14,
148-
width: '100%',
122+
minHeight: 40,
123+
flex: 1,
124+
},
125+
hor: {
126+
flexDirection: 'row',
127+
alignItems: 'center',
128+
borderColor: '#000',
129+
borderWidth: 1,
130+
},
131+
sendButton: {
132+
alignItems: 'center',
133+
justifyContent: 'center',
134+
backgroundColor: '#000',
135+
borderRadius: 15,
136+
width: 60,
137+
height: 30,
138+
marginHorizontal: 10,
139+
},
140+
sendText: {
141+
color: '#fff',
142+
fontSize: 14,
143+
fontWeight: 'bold',
144+
},
145+
icon: {
146+
width: 30,
147+
height: 30,
149148
},
150149
});

‎example/src/EmojiList.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import {
3+
FlatList,
4+
Image,
5+
View,
6+
Dimensions,
7+
TouchableOpacity,
8+
} from 'react-native';
9+
import { EMOJIDATA, IEmojiDataType, IInputEmojiDataType } from './assets';
10+
interface IProps {
11+
keyBoardHeight?: number;
12+
numColumns: number;
13+
onSelect?: (data: IInputEmojiDataType) => void;
14+
}
15+
const EMOJISIZE = 40;
16+
const { width } = Dimensions.get('window');
17+
const EmojiList: React.FC<IProps> = (props) => {
18+
const onPress = (data: IEmojiDataType) => () => {
19+
const assetSource = Image.resolveAssetSource(data.img);
20+
const item: IInputEmojiDataType = {
21+
emojiTag: data.emojiTag,
22+
img: assetSource,
23+
type: 1,
24+
emojiUri: assetSource.uri,
25+
};
26+
props.onSelect && props.onSelect(item);
27+
};
28+
const emoji_Item = ({ item }: { item: IEmojiDataType }) => {
29+
return (
30+
<TouchableOpacity activeOpacity={0.85} onPress={onPress(item)}>
31+
<View
32+
style={{
33+
alignItems: 'center',
34+
justifyContent: 'center',
35+
width: width / props.numColumns,
36+
height: width / props.numColumns,
37+
}}
38+
>
39+
<Image
40+
source={item.img}
41+
style={{ width: EMOJISIZE, height: EMOJISIZE }}
42+
/>
43+
</View>
44+
</TouchableOpacity>
45+
);
46+
};
47+
return (
48+
<View style={{ height: props.keyBoardHeight, width: '100%' }}>
49+
<FlatList
50+
data={EMOJIDATA}
51+
renderItem={emoji_Item}
52+
numColumns={props.numColumns}
53+
columnWrapperStyle={{ justifyContent: 'space-between' }}
54+
getItemLayout={(_data, index) => ({
55+
length: EMOJISIZE,
56+
offset: EMOJISIZE * index,
57+
index,
58+
})}
59+
/>
60+
</View>
61+
);
62+
};
63+
export { EmojiList };

‎example/src/assets/a.png‎

5.52 KB

‎example/src/assets/aoman.png‎

6.9 KB

‎example/src/assets/bangqiu.png‎

6.03 KB

‎example/src/assets/baolingqiu.png‎

5.24 KB

‎example/src/assets/baozhu.png‎

3.34 KB

‎example/src/assets/bing.png‎

2.99 KB

‎example/src/assets/bugaoxing.png‎

6.04 KB

‎example/src/assets/caihonggou.png‎

4.56 KB

0 commit comments

Comments
 (0)