Javascript React Native：如何结合GiftedChat和ScrollableTabView？
我正在尝试将一些React本地组件组合在一起，但遇到了一些问题。一旦视图中的消息超过10条，GiftedChat组件就会被切断，我不确定需要更改哪些样式规则才能将消息的文本输入字段固定在底部。 深入研究GiftedChat的组件代码，我尝试将里面的Composer组件设置为底部绝对位置，但没有成功。当我签出ScrollableTabView样式组件时，我不知道从哪里开始寻找我可以编辑的部分，因为它是一个相当复杂的组件 关于如何让这两个组件协同工作，有什么建议吗 以下是指向my index.ios.js的链接：Javascript React Native：如何结合GiftedChat和ScrollableTabView？,javascript,reactjs,jsx,react-native,Javascript,Reactjs,Jsx,React Native,我正在尝试将一些React本地组件组合在一起，但遇到了一些问题。一旦视图中的消息超过10条，GiftedChat组件就会被切断，我不确定需要更改哪些样式规则才能将消息的文本输入字段固定在底部。 深入研究GiftedChat的组件代码，我尝试将里面的Composer组件设置为底部绝对位置，但没有成功。当我签出ScrollableTabView样式组件时，我不知道从哪里开始寻找我可以编辑的部分，因为它是一个相当复杂的组件 关于如何让这两个组件协同工作，有什么建议吗 以下是指向my index.ios
import React, { Component } from 'react';
import ScrollableTabView, {ScrollableTabBar, } from 'react-native-scrollable-tab-view';
import { GiftedChat } from 'react-native-gifted-chat';
import {
AppRegistry,
StyleSheet,
Text,
View,
NativeAppEventEmmiter,
TouchableHighlight,
ListView,
Image,
ScrollView,
} from 'react-native';
class whistle extends Component {
constructor(props){
super(props);
this.state = {
messages: []
}
this.onSend = this.onSend.bind(this);
}
componentWillMount() {
this.setState({
messages: [
{
_id: 1,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id: 2,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id: 3,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id: 4,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id: 5,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id: 6,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id: 7,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id: 8,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id: 9,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id: 10,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
],
});
}
onSend(messages = []) {
this.setState((previousState) => {
return {
messages: GiftedChat.append(previousState.messages, messages),
};
});
}
render() {
return (
<View>
<ScrollableTabView
style={{marginTop: 20, }}
initialPage={0}
renderTabBar={() => <ScrollableTabBar />}
>
<View tabLabel='Conversation'>
<GiftedChat
messages={this.state.messages}
onSend={this.onSend}
user={{
_id: 1,
}}
/>
</View>
</ScrollableTabView>
</View>
);
}
}
const styles = StyleSheet.create({
});
AppRegistry.registerComponent('whistle', () => whistle);
import React，{Component}来自'React'；
从“react native scrollable tab view”导入ScrollableTabView，{ScrollableTabBar，}；
从“react native gifted chat”导入{GiftedChat}；
进口{
评估学，
样式表，
文本，
看法
国家检察官，
触控高光，
ListView，
形象,，
滚动视图，
}从“反应本机”；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
信息：[]
}
this.onSend=this.onSend.bind（this）；
}
组件willmount（）{
这是我的国家({
信息：[
{
_id:1，
文本：“你好，开发者”，
createdAt：新日期（UTC日期（2016,7,30,17,20,0）），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id:2，
文本：“你好，开发者”，
createdAt：新日期（UTC日期（2016,7,30,17,20,0）），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id:3，
文本：“你好，开发者”，
createdAt：新日期（UTC日期（2016,7,30,17,20,0）），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id:4，
文本：“你好，开发者”，
createdAt：新日期（UTC日期（2016,7,30,17,20,0）），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id:5，
文本：“你好，开发者”，
createdAt：新日期（UTC日期（2016,7,30,17,20,0）），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id:6，
文本：“你好，开发者”，
createdAt：新日期（UTC日期（2016,7,30,17,20,0）），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id:7，
文本：“你好，开发者”，
createdAt：新日期（UTC日期（2016,7,30,17,20,0）），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id:8，
文本：“你好，开发者”，
createdAt：新日期（UTC日期（2016,7,30,17,20,0）），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id:9，
文本：“你好，开发者”，
createdAt：新日期（UTC日期（2016,7,30,17,20,0）），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://facebook.github.io/react/img/logo_og.png',
},
},
{
_id:10，
文本：“你好，开发者”，
createdAt：新日期（UTC日期（2016,7,30,17,20,0）），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://facebook.github.io/react/img/logo_og.png',
},
},
],
});
}
onSend（消息=[]）{
this.setState（（以前的状态）=>{
返回{
消息：giftechat.append（previousState.messages，messages），
};
});
}
render（）{
返回(
}
>
);
}
}
const styles=StyleSheet.create({
});
AppRegistry.registerComponent（'whistle'，（）=>whistle）；
滚动视图中添加gifted chat