增加Icon.ToolbarAndroid内的文本框宽度

时间:2017-03-18 12:43:03

标签: reactjs react-native android-toolbar

我试图在Icon.ToolbarAndroid组件中创建一个搜索框。但我无法更改文本框的宽度以占用所有区域,直到消息图标。有人可以帮助我吗?

enter image description here

以下是我使用的代码。 (我也试过把minWidth也放了。)

            <Icon.ToolbarAndroid
            actions={[
                { title: 'Chat', iconName: 'chat', iconSize: 24, show: 'always' },
                { title: 'Alert', iconName: 'notifications', iconSize: 24, show: 'always' }
            ]}
            navIconName="menu"
            title=""
            style={styles.toolbar}
            onActionSelected={this.onActionSelected}
            onIconClicked={this.onIconClicked.bind(this)}
        >
            <TextInput style={styles.searchBox}  minWidth={40}>Testing</TextInput>
        </Icon.ToolbarAndroid>

这是我使用过的造型。

const styles = StyleSheet.create({
    toolbar: {
        backgroundColor: '#2D4571',
        height: 48,
    },
    searchBox: {
        backgroundColor: '#4D648D',
        color: '#eeeeee',
        width: 40
    }
});

1 个答案:

答案 0 :(得分:0)

我能够通过在视图中包装文本输入来实现结果。但它仅在给出backgroundColor时才有效。如果我删除它的颜色,请回到上面的图片。

            <View style={{ flex: 1, backgroundColor: '#ffaabb', flexDirection: 'row' }}>
                <TextInput style={styles.searchBox} >Testing </TextInput>
            </View>