React-native条件渲染会影响条件之外的元素

Question

如果用户通过wifi或单元格数据连接，我试图有条件地渲染图标和一些文本。只有连接时，才会出现左侧带有电话号码的图标。否则，它不应该渲染，其余的图标应该填充空间。当我切换连接时，电话号码文本仍然存在，但图标消失，其余部分填充空间。谁能告诉我为什么文本（电话号码）没有按照需要改变？

条件渲染的相关代码：

<View style={styles.actionArea}>
    {props.isConnected && (
        <View style={styles.actionItem}>
        <Text>{props.dispatch.call_back_number}</Text>
        <MaterialCommunityIcons name={'phone-forward'} size={50} onPress={() => handleClick(`tel:${props.dispatch.call_back_number}`)}/>
        </View>
        )}

    <View style={styles.actionItem}>
    <Text>Enter Call Log</Text>
    <MaterialCommunityIcons name={'phone'} size={50}  onPress={() => props.enterCallLog(true)}/>
    </View>

    <View style={styles.actionItem}>
    <Text>Work Order</Text>
    <MaterialCommunityIcons name={'wrench'} size={50}/>
    </View>

    <View style={styles.actionItem}>
    <Text>Contracts</Text>
    <MaterialCommunityIcons name={'animation'} size={50}/>
    </View>
    </View>

样式代码：

actionArea: {
        paddingTop: 10,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
    },
    actionItem: {
        flexDirection: 'column',
        alignItems: 'center',
    },