Question

在添加flexbox以使2 TextInput对齐一行（响应本机0.59.5）之后，它与下面的TextInput产生了巨大的差距：

这里是render和stylesheet：

   render() {
        return (
        <View style={styles.container}>
            <TextInput
            style={styles.input}
            placeholder='Username'
            autoCapitalize="none"
            placeholderTextColor='white'
            onChangeText={val => this.onChangeText('username', val)}
            />
            <View style={{flex: 1, flexDirection: 'row', height:55, width: 350}}>                
                <TextInput
                style={styles.inputLeft}
                placeholder='Country Code'
                autoCapitalize="none"
                keyboardType='number-pad'
                placeholderTextColor='white'
                onChangeText={val => this.onChangeText('cell_country_code', val)}
                />
                <TextInput
                style={styles.inputRight}
                placeholder='Cell'
                keyboardType='number-pad'
                autoCapitalize="none"
                placeholderTextColor='white'
                onChangeText={val => this.onChangeText('cell', val)}
                />
            </View>

            <SegmentedControlTab
                    values={['群众', '群干', '群主']}
                    selectedIndex={this.state.selectedIndex}
                    onTabPress={this.handleIndexChange}
                    tabsContainerStyle={styles.tabContainerStyle}
                    />
            <TextInput
            style={styles.input}
            placeholder='Corp Name'
            autoCapitalize="none"
            placeholderTextColor='white'
            onChangeText={val => this.onChangeText('corp_name', val)}
            />
            <Button
            title='Save'
            onPress={this.save}
            />
        </View>
        )
    }
}

const styles = StyleSheet.create({
    input: {
        width: 350,
        height: 55,
        backgroundColor: '#42A5F5',
        margin: 10,
        padding: 8,
        color: 'white',
        borderRadius: 2,
        fontSize: 18,
        fontWeight: '500',
    },
    inputRight: {
        flex:3,
        //width: 245,
        height: 55,
        backgroundColor: '#42A5F5',
        margin: 5,
        marginRight:0,
        padding: 8,
        color: 'white',
        borderRadius: 2,
        fontSize: 18,
        fontWeight: '500',
    },
    inputLeft: {
        flex:1,
        //width: 95,
        height: 55,
        backgroundColor: '#42A5F5',
        margin: 5,
        marginLeft:0,
        padding: 8,
        color: 'white',
        borderRadius: 2,
        fontSize: 18,
        fontWeight: '500',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    tabContainerStyle: { 
        height: 50, 
        width: 350, 
        backgroundColor: '#F2F2F2' 
    },
})

添加到flexbox的高度没有帮助消除间隙。如何消除两者之间的巨大差距？

Answer 1

只需从该行中删除flex：1

<View style={{flex: 1, flexDirection: 'row', height:55, width: 350}}>

到

<View style={{flexDirection: 'row', height:55, width: 350}}>

我认为这会起作用

消除弹性盒和下方组件之间的空隙

1 个答案: