修改首页聊天框布局

最后更新: 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