修改首页聊天框布局
最后更新: 2019/9/26在修改首页聊天框布局之前，首先了解一下首页聊天框的绘制代码，打开app/biz/home/StandardView.tsx文件如下：
public render(): React.ReactChild | null {
return (
<View style={styles.backgroundImage}>
......
<View
style={{
marginLeft: 34.5,
height: 140.6,
marginTop: 28.6
}}
>
<FlatList
data={homeStore.getQueryArray().map((t: string) => {
return { key: t };
})}
renderItem={this._renderItem}
getItemLayout={(item, index) => ({
length: 39.4,
offset: 39.4 * index,
index
})}
numColumns={2}
/>
</View>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{ marginTop: 30.9, height: 137.1 }}
>
{this._renderScroolItem(homeStore.getSkillArray())}
</ScrollView>
</View>
);
}
其中首页中央的文案布局是由代码中的FlatList控制的，因此只需要修改FlatList中的布局就可以实现对首页中央文案的修改。
首页底部的功能按钮的布局是由代码中的ScrollView控制的，因此修改ScrollView的布局就能修改相应的按钮的样式。
1.修改首页中央的文案布局
将FlatList标签中的列表由两列变成三列：
<FlatList
data={homeStore.getQueryArray().map((t: string) => {
return { key: t };
})}
renderItem={this._renderItem}
getItemLayout={(item, index) => ({
length: 39.4,
offset: 39.4 * index,
index
})}
numColumns={3}
/>
将每一列的宽度变为屏幕宽度的1/3:
private _renderItem = ({ item, index }): React.ReactChild => (
<TouchableOpacity
key={item.key.toString()}
style={{ width: '33.3%' }}
activeOpacity={0.5}
onPress={this.itemClick.bind(this, item, index)}
>
<Text
style={{
fontFamily: 'PingFangSC-Regular',
fontSize: 14.3,
color: 'white',
lineHeight: 19.4,
marginBottom: 20
}}
>
{this._getText(item)}
</Text>
</TouchableOpacity>
);
2 .调整首页底部的功能按钮布局
首页底部的功能按钮区域中的每一列都显示两个按钮。
首先注释掉itemArray.push部分的代码，然后将for (let i = 1; i < skillArray.length - 1; i += 2)
修改为for (let i = 0; i < skillArray.length - 1; i += 2)
private _renderScroolItem = (
skillArray: any
): React.ReactElement[] | null => {
......
// itemArray.push(
// <TouchableOpacity
// style={{ marginLeft: 34.5 }}
// key={skillArray[0].switchCheckModeText}
// activeOpacity={0.5}
// onPress={() => this.homeAction.queryByText(skillArray[0].tip)}
// >
// <ImageBackground
// source={
// skillArray[0].icon !== ''
// ? { uri: 'file://' + skillArray[0].icon }
// : this._getImageByTitle(skillArray[0].title)
// }
// style={{
// width: 112,
// height: 137.1,
// marginRight: 2.85,
// marginTop: 2.85
// }}
// imageStyle={{ borderRadius: 2.85 }}
// >
// <Text
// style={{
// fontFamily: 'PingFangSC-Regular',
// fontSize: 14.3,
// color: 'white',
// marginLeft: 11.43,
// marginTop: 11.43
// }}
// >
// {skillArray[0].title}
// </Text>
// </ImageBackground>
// </TouchableOpacity>
// );
for (let i = 0; i < skillArray.length - 1; i += 2) {
itemArray.push(
<View style={{ flexDirection: 'column' }}>
{this._renderScroolItemChild(skillArray[i])}
{this._renderScroolItemChild(skillArray[i + 1])}
</View>
);
}
if (length % 2 === 0) {
{
this._renderScroolItemChild(skillArray[length - 1]);
}
}
return itemArray;
};
效果预览
点击Terminal-New Terminal，连接好机器人设备，在Terminal输入如下命令，即可运行示例代码并查看修改后的效果：
orionos-cli run
