Question

我已经尝试过在反应本机中设计屏幕，但是它很难将屏幕的列和行划分为离子和角 Output of that below code

 <View style={styles.listItemContainer}>   
<View style={{flex:1}}>    
<View style={{flexDirection:"column"}}>
  <Text>1003234</Text>
  <Text>Info Test........</Text>
  </View>
</View>
<View style={{flexDirection:"column"}}>
<Text style={{backgroundColor:"red",borderRadius:10,padding:2,
marginRight:10,marginTop:5,fontSize:12}}>Inprogress</Text>
</View> 
</View>`

exactly what i need

Answer 1

您可以使用平面列表使用以下代码将样式应用于列表

          <FlatList style={Styles.container}
                    data={this.props.listData}
                    extraData={this.state.selectedItem}
                    keyExtractor={(item, index) => item.id}
                    renderItem={({ item, index }) => (
                        this.renderRow(item, index)
                    )}
                    ListEmptyComponent={this.showEmptyListView()}
                />

您的行渲染看起来像这样。

renderRow = (item, index) => {

    return (
        <TouchableHighlight key={index} onPress={() => this.onPressAction(item)} >
            <View style={Styles.listItemContainer}>
                <View style={Styles.listDesign}>
                    <View style={Styles.imageLength}>
                        {
                            item.imageUrl == '' ?
                                <Image
                                    source={require("./../../assets/images/default-display.png")}
                                    style={{ resizeMode: "cover", width: '100%', height: 100 }} /> :
                                <Image
                                    source={{ uri: item.thumbnailImageUrl }}
                                    style={{ resizeMode: "cover", width: '100%', height: 100 }} />
                        }

                    </View>
                    <View style={[Styles.columnAlign, Styles.contentWidth]}>
                        <View style={[Styles.justifyEnd, Styles.imageContainer]}>

                                    <View style={Styles.justifySpaceAround}>
                                        <Image
                                            source={require("./../../assets/images/anyImage.png")}
                                            style={{ resizeMode: "cover", width: 25, height: 25 }} />
                                    </View> 

                        </View>
                        <View style={Styles.buttonContainer}>
                            <Text style={Styles.vehicleDesc}>{"test"}</Text>
                        </View>
                        <View style={Styles.buttonContainer}>
                            <Text style={Styles.text}>{item.mileage}{translate("Test 1")}</Text>
                        </View>
                        <View style={Styles.buttonContainer}>
                            <Text style={Styles.text}>{"Test2"}</Text>
                        </View>



                                <View style={Styles.buttonContainer}>
                                    <Text style={Styles.watchListtext}>{"Test 3"}</Text>
                                </View> 

                    </View>


                </View>

            </View>
        </TouchableHighlight>
    );

}

您的风格

 listItemContainer: {
    marginTop: 7,
    //  marginBottom: 7,
    flexDirection: 'row',

    alignItems: 'flex-start',
},
listDesign: {

    backgroundColor: Colors.white,
    flexDirection: 'row',
    alignItems: 'center',
    padding: 6,
    width: '100%'
},
vehicleDesc: {
    marginLeft: 12,
    fontSize: 16,
    color: '#AA2328',
    fontWeight: 'bold'
},
text: {
    marginLeft: 12,
    fontSize: 14,
    color: Colors.black,
},
watchListtext: {
    marginLeft: 12,
    fontSize: 14,
    color: Colors.brandPrimary,
},
 imageLength: {
    width: '35%'
},
contentLength: {
    width: '65%'
},
  container: {
    flex: 1,
    backgroundColor: Colors.creamyWhite,

},
  buttonContainer: {

    flexDirection: 'row',
    padding: 2

}, imageContainer: {
    flexDirection: 'row',
},
justifySpaceAround:
{
    justifyContent:'space-around'
}
justifyEnd:
{
 justifyContent:'flex-end'
},
 coulmnAlign:
{
 flexDirection:'coumn'
}

您显示空数据

   showEmptyListView = () => {
    return (
        <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 10 }}>
            <Text style={{ color: Colors.white }}>{"No Data to Display"}</Text>
        </View>
    )
}

Answer 2

您必须处理很多样式。您只需要3个通用标签： HorizontalContainer，垂直容器 ItemContainer，

export const VerticalContainer = styled.View({
    flex: 1,
    flexDirection: "column",
    backgroundColor: (props) => props.backgroundColor || "#000"
});

export const HorizontalContainer = styled.View({
    flex: 1,
    flexDirection: "row",
    backgroundColor: (props) => props.backgroundColor || "#000"
});

export const ItemContainer = styled.View({
    flex: (props) => props.flex || 1
});

您喜欢的内部手柄：

<HorizontalContainer backgroundColor="#fff">
    <ItemContainer/>
    <ItemContainer flex=2></ItemContainer>
    <ItemContainer /> 
</HorizontalContainer >

希望能帮助您！

Answer 3

我已经用我自己的代码完成了（带有api的FlatList视图以及设计和搜索栏数据）在该代码中，我删除了我的api调用服务，您可以尝试自己的

Output Here(Check Before You Try)

i += 2;

反应本机列表视图设计

3 个答案: